在JavaScript中，append 方法通常用于将一个或多个元素添加到父元素的末尾，如果你想添加多行内容，可以使用appendChild 或者innerHTML 等方法，以下是一些详细的例子：
使用 `appendChild` 方法
// 创建一个新的 div 元素
var newDiv = document.createElement("div");
// 创建多个新的 p 元素并设置其内容
var p1 = document.createElement("p");
p1.textContent = "这是第一行内容";
var p2 = document.createElement("p");
p2.textContent = "这是第二行内容";
var p3 = document.createElement("p");
p3.textContent = "这是第三行内容";
// 将 p 元素依次添加到新的 div 元素中
newDiv.appendChild(p1);
newDiv.appendChild(p2);
newDiv.appendChild(p3);
// 将新的 div 元素添加到现有的父元素中
document.body.appendChild(newDiv);
使用 `innerHTML` 方法
// 创建一个包含多行内容的字符串
var content = `
<p>这是第一行内容</p>
<p>这是第二行内容</p>
<p>这是第三行内容</p>
`;
// 将内容插入到现有的父元素中
document.body.innerHTML += content;
使用模板字符串和insertAdjacentHTML 方法
// 创建一个包含多行内容的模板字符串
var content = `
<div>
<p>这是第一行内容</p>
<p>这是第二行内容</p>
<p>这是第三行内容</p>
</div>
`;
// 将内容插入到现有的父元素中
document.body.insertAdjacentHTML('beforeend', content);
使用append 方法（适用于现代浏览器）
// 创建一个包含多行内容的模板字符串
var content = `
<div>
<p>这是第一行内容</p>
<p>这是第二行内容</p>
<p>这是第三行内容</p>
</div>
`;
// 将内容解析为 DOM 节点并追加到现有的父元素中
var tempDiv = document.createElement('div');
tempDiv.innerHTML = content;
document.body.append(...tempDiv.children);
这些方法都可以有效地将多行内容添加到页面中，选择哪种方法取决于你的具体需求和代码风格。
到此，以上就是小编对于“append js 加入多行”的问题就介绍到这了，希望介绍的几点解答对大家有用，有任何问题和不懂的，欢迎各位朋友在评论区讨论，给我留言。
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/709637.html
微信扫一扫 