How to add a black dot before a paragraph JavaScript

In web design and development, sometimes we need to add a small black dot before the text as the identifier of the list. This little black dot is what we often call the "bullet point". It can make our list clearer and more beautiful, and help readers better read and understand the content of the article. In this article, we will introduce how to use JavaScript to add dot symbols.

1. Adding dot symbols in HTML

In HTML, we can use an unordered list to add dot symbols. There is a dot symbol in front of each item in the unordered list. The following is an example:

<ul>
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
</ul>

This unordered list will be displayed as:

• First item
• Second item
• Third item

However, using an unordered list to add dot symbols may be affected by CSS style and layout, so we JavaScript can be used to achieve more flexible and customizable effects.

2. Use JavaScript to add dot symbols

In JavaScript, we can create a reusable function to add dot symbols. The following is a simple code example:

function addBulletPoint(element) {
  var bullet = document.createElement('span');
  bullet.innerHTML = '• '; // HTML中的圆点符号
  element.insertBefore(bullet, element.firstChild);
}

In the above code, we use the createElement method to create a span element and set its innerHTML to the dot symbol (HTML entity •). Next, we insert this element before the first child element of the target element, that is, insert a small black dot before the text. This function can be called by passing in the ID of the target element:

addBulletPoint(document.getElementById('list-item-1'));

By repeatedly calling the addBulletPoint function, we can add dot symbols to multiple elements.

3. Beautify the dot symbol

If you want to make the dot symbol look more beautiful, you can use CSS styles to adjust its appearance. For example, you can add color to dot symbols, set font size, modify spacing, and more. The following are some CSS styles that you can refer to:

.bullet-point {
  color: #333;
  font-size: 18px;
  line-height: 1.5;
  margin-right: 5px;
}

You can apply this style to the span element of the dot symbol we added:

function addBulletPoint(element) {
  var bullet = document.createElement('span');
  bullet.innerHTML = '• '; // HTML中的圆点符号
  bullet.className = 'bullet-point'; // 添加CSS样式
  element.insertBefore(bullet, element.firstChild);
}

In this way, our dot symbol will Became more beautiful and attractive.

4. Summary

In this article, we introduced how to use JavaScript to add dot symbols and how to beautify it through CSS styles. Adding dot symbols can make our articles and content clearer and easier to read, while also improving the aesthetics of the page. If you are creating a website or article, these tips will be very useful.

The above is the detailed content of How to add a black dot before a paragraph JavaScript. For more information, please follow other related articles on the PHP Chinese website!