在JavaScript中,动态创建元素是常见的操作。它可以让我们根据需要自由添加和修改页面元素,从而实现更好的用户体验。下面是一些方法和示例:

  1. createElement()方法 使用该方法可以在文档中创建新的HTML元素节点,具体用法如下:
var para = document.createElement("p"); //创建一个p元素
var node = document.createTextNode("新创建的一段文字。"); //创建文本节点
para.appendChild(node); //将文本节点添加到p元素
document.body.appendChild(para); //将p元素添加到body元素
  1. cloneNode()方法 使用该方法可以复制现有的节点,包括它的属性和子节点,具体用法如下:
var original = document.getElementById("id1"); //获取需要复制的节点
var clone = original.cloneNode(true); //true表示复制节点及其后代节点
document.body.appendChild(clone); //将复制的节点添加到body元素
  1. innerHTML属性 使用该属性可以直接修改元素的HTML内容,包括文本和标记,具体用法如下:
document.getElementById("id2").innerHTML = "<p>新的一段文字。</p>"; //将id为id2的元素HTML内容修改为一段新的文字