元素内包含的文本。注意，使用innerHTML属性添加元素会完全替换原有的HTML内容。

除了innerHTML属性，我们还可以使用document.write()方法向文档中添加HTML代码：

// 在文档中写入一个
元素
document.write("
这是新添加的标题。
");

这种方法会直接将HTML代码写入到文档流中，因此只有在页面加载时才能调用它。

最后，我们可以使用createElement()方法创建一个新的HTML元素，并使用appendChild()方法将其添加到文档中：

// 创建一个
元素
var para = document.createElement("p");

// 向
元素中添加文本
var node = document.createTextNode("这是新添加的文本。");
para.appendChild(node);

// 将
元素添加到的末尾
document.body.appendChild(para);

可以看到，我们使用createElement()方法创建了一个新的

元素，使用createTextNode()方法向这个元素添加了一些文本内容。接着，使用appendChild()方法将这个元素添加到了的末尾。

六、原生JS为元素添加id

在JavaScript中，我们可以使用setAttribute()方法为一个HTML元素添加一个新的属性。使用此方法为元素添加一个id属性时，可以为元素在JavaScript中的操作提供方便。

// 获取一个
元素
var para = document.getElementsByTagName("p")[0];

// 为
元素添加id
para.setAttribute("id", "myPara");

可以看到，使用getElementsByTagName()方法获取了一个

元素，接着使用setAttribute()方法将一个id属性添加到该元素中。在JavaScript中，可以通过id属性轻松访问该元素。

七、JS添加元素事件

在JavaScript中，我们可以使用addEventListener()方法向一个元素添加一个事件处理程序。该方法的参数可以包括事件名称和事件处理函数。

// 获取一个元素
var btn = document.getElementsByTagName("button")[0];

// 为元素添加click事件的处理函数
btn.addEventListener("click", function() {
  alert("按钮被点击了！");
});

可以看到，使用getElementsByTagName()方法获取了一个元素，接着使用addEventListener()方法为该元素添加了一个click事件的处理函数。当用户单击按钮时，触发该事件，弹出一个警告对话框。

八、JS删除元素

在JavaScript中，我们可以使用removeChild()方法从文档中删除一个元素。该方法需要指定要删除的元素，并通过其父元素来调用它。下面是一个例子：

// 获取要删除的元素
var para = document.getElementById("myPara");

// 获取父元素
var parent = para.parentNode;

// 删除子元素
parent.removeChild(para);

可以看到，首先使用getElementById()方法获取了要删除的

元素，接着使用parentNode属性获取了该元素的父元素。最后使用removeChild()方法从父元素中删除了该元素。

九、JS添加元素到表格

在JavaScript中，我们可以使用DOM来操作HTML表格。要向表格添加一行，我们需要创建一个新的元素，并为每个单元格设置内容。下面的示例展示了如何向一个表格中添加一行：

// 获取一个
可以看到，首先使用getElementById()方法获取了一个
        元素
var table = document.getElementById("myTable");

// 创建一个新行
var row = table.insertRow();

// 创建两个新单元格，并向其中添加文本
var cell1 = row.insertCell();
var cell2 = row.insertCell();
cell1.innerHTML = "新的单元格1";
cell2.innerHTML = "新的单元格2";



        
十、JS添加元素产生浮动选取
在JavaScript中，我们可以使用range对象向文档中添加新的元素。这个过程通常称为“浮动选取”，因为它可以像选定文本一样选择DOM节点。
// 创建一个选区
var range = document.createRange();

// 为选区设置开始位置和结束位置
range.setStart(document.getElementsByTagName("p")[0], 2);
range.setEnd(document.getElementsByTagName("p")[0], 5);

// 在选区中插入一个新元素
var newElement = document.createElement("span");
newElement.innerHTML = "新的文本";
range.insertNode(newElement);
可以看到，首先使用createRange()方法创建了一个新的选区，接着使用setStart()和setEnd()方法设置选区的开始位置和结束位置。最后使用createElement()方法创建一个新的元素，并使用insertNode()方法将其插入到选区中。
总结
在本文中，我们讨论了JavaScript中添加元素的各种方法，包括添加元素和样式、添加元素到数组的第一位、添加元素到数组、添加元素节点的方法、添加元素的方法、为元素添加id、添加元素事件、删除元素、添加元素到表格和添加元素产生浮动选取。这在前端开发中是非常有用的知识，希望本文能给你带来帮助。

        

    
         
苏ICP备2023018380号-1 Copyright www.python100.com .Some Rights Reserved.

        
        

    
         

        
          
文章目录
          
                
          

           总结
          
            
         

        
        
顶部
        元素，接着使用insertRow()方法创建了一个新的行，并使用insertCell()方法创建了两个新的单元格。最后使用innerHTML属性向这些单元格中添加了一些文本内容。