JavaScript createElement InnerHTML - 使用JavaScript创建元素和修改HTML内容

JavaScript是一种非常流行的编程语言，特别是在web开发中。其中，createElement和innerHTML是常用的方法，用于创建和修改HTML元素。

创建HTML元素

使用createElement方法可以通过JavaScript动态地创建HTML元素，并在文档中添加。以下是一个示例，该示例创建一个新的段落元素，并将其添加到文档中：

const newParagraph = document.createElement('p');
newParagraph.innerHTML = '这是一个新的段落。';

const parentElement = document.getElementById('myElement');
parentElement.appendChild(newParagraph);

在上面的代码中，我们首先使用createElement方法来创建一个新的段落元素，然后使用innerHTML方法设置其文本内容，并最终将其添加到文档中。

修改HTML内容

innerHTML方法可以用于修改元素的HTML内容。以下是一个示例，该示例使用innerHTML方法将元素的内容修改为新值：

const myElement = document.getElementById('myElement');
myElement.innerHTML = '<b>新文本内容</b>';

在上面的代码中，我们首先获取一个具有ID“myElement”的元素，然后使用innerHTML方法将其内容修改为新值。在此示例中，我们将内容设置为新的粗体文本。

避免安全漏洞

innerHTML方法确实非常方便，但使用不当可能导致安全漏洞。例如，使用innerHTML方法动态地添加用户输入的内容可能导致脚本注入攻击。为了避免这种情况，可以使用文本节点或textContent属性来设置文本内容。

const newParagraph = document.createElement('p');
const newText = document.createTextNode('这是一个新的段落。');
newParagraph.appendChild(newText);

const parentElement = document.getElementById('myElement');
parentElement.appendChild(newParagraph);

在上面的代码中，我们使用文本节点来设置文本内容。这个示例是安全的，因为文本内容被视为纯文本而不是HTML代码。如果您需要添加HTML代码，最好使用createElement和appendChild方法来创建和添加元素。

结论

在JavaScript中使用createElement和innerHTML方法可以方便地创建和修改HTML元素。但要注意代码安全性并正确使用这些方法。对于插入动态内容，可以使用文本节点或textContent属性来避免潜在的安全漏洞。