原生js实现给指定元素的后面追加内容

下面是详细讲解“原生JS实现给指定元素的后面追加内容”的完整攻略：

1. 获取指定元素参考

要想向指定的元素后面追加内容，首先需要获取到该元素的引用。在原生JS中，我们可以通过document.getElementById()或document.querySelector()方法来获取指定元素的引用。举个栗子：

// 获取id为"myDiv"的元素
var myDiv = document.getElementById("myDiv");

// 获取class为"myClass"的第一个元素
var myElement = document.querySelector(".myClass");

2. 创建新元素

在向指定元素后面追加内容之前，需要先创建一个新的元素节点。JS提供了document.createElement()方法，可以用于创建新的元素节点。例如，我们创建一个新的段落元素：

var p = document.createElement("p");

3. 给新元素赋值

创建新元素后，我们可以使用其innerHTML属性或textContent属性来设置需要追加的内容。举个栗子：

var p = document.createElement("p");
p.innerHTML = "我是需要追加的内容";   // 或 p.textContent = "我是需要追加的内容";

4. 追加元素

创建并赋值好的新元素，可以通过appendChild()方法向指定元素的末尾添加到DOM树中。例如，我们向之前获取到的myDiv元素中追加上述新创建的段落元素：

myDiv.appendChild(p);

最终代码如下：

// 获取指定元素
var myDiv = document.getElementById("myDiv");
// 创建新元素
var p = document.createElement("p");
// 给新元素赋值
p.textContent = "我是需要追加的内容";
// 追加新元素到指定元素后面
myDiv.appendChild(p);

下面再举一个示例，向指定元素的后面添加一个带有id和class属性的<div>元素：

// 获取指定元素
var myElement = document.querySelector(".myClass");
// 创建新元素
var div = document.createElement("div");
// 给新元素的class和id属性赋值
div.className = "myNewDiv";
div.id = "newId";
// 给新元素内部添加html
div.innerHTML = "<p>我是新的div元素</p>";
// 追加新元素到指定元素后面
myElement.appendChild(div);

以上就是原生JS实现给指定元素的后面追加内容的完整攻略。需要注意的是，如果需要向指定元素前面追加内容，可以使用insertBefore()方法。具体使用方法可参考JS文档。