数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何使用 JavaScript 将 HTML 代码追加到 div 中？
为了使用 JavaScript 将 HTML 代码追加到 div 中，我们将使用 HTML DOM 方法和属性。本文讨论了四种不同的方法，并提供了逐步说明和完整的示例代码。
在本文中，我们有一个带有 id 为 container 的 div，我们的任务是使用 JavaScript 将 HTML 代码追加到该 div 中。
追加 HTML 代码到 div 的方法
以下是使用 JavaScript 将 HTML 代码追加到 div 的几种方法，我们将在本文中对这些方法进行逐步说明和完整的示例代码。
使用 innerHTML 属性
为了使用 JavaScript 将 HTML 代码追加到 div 中，我们使用了 HTML DOM 的 innerHTML 属性，该属性设置元素的 HTML 内容。
- 我们创建了一个 div 容器，用于显示追加的 HTML 代码。
- 我们创建了一个 按钮，单击该按钮时会触发函数 appendHTML。
- 在 appendHTML 函数中，我们使用 getElementById 选择了 div，然后使用 innerHTML 属性将 HTML 代码追加到选定的 div 中。
示例
这是一个完整的示例代码，实现了上述步骤，使用 innerHTML 属性将 HTML 代码追加到 div 中。
<!DOCTYPE html>
<html>
<head>
<title>
Appending HTML code to a div using JavaScript
</title>
</head>
<body>
<h3>
To Append HTML Code to a div Using JavaScript
</h3>
<p>
In this example we have used <strong>innerHTML
</strong> to append HTML code to a div using
javascript.
</p>
<h4>
Click the button below to add HTML code to div.
</h4>
<div id='container'></div>
<button onclick="appendHtml()">Click Me</button>
<script>
function appendHtml() {
let txt = document.getElementById('container');
txt.innerHTML='<p>This is some HTML code</p>';
}
</script>
</body>
</html>
使用 appendChild 方法
在这种使用 JavaScript 将 HTML 代码追加到 div 的方法中，我们使用了 HTML DOM 元素 appendChild() 方法，该方法追加节点。在我们的示例中，它将一个 div 元素追加到 div 容器中。
- 我们创建了一个 div 容器，用于显示追加的 HTML 代码。
- 我们创建了一个按钮，单击该按钮时会触发函数 appendHTML。
- 在 appendHTML 函数中，我们使用 createElement() 方法创建了一个新的 div 元素，然后使用 textContent 属性将文本添加到新创建的 div 中。
- 最后，我们使用 appendChild() 方法将新创建的 div 追加到 div 容器中。
示例
这是一个完整的示例代码，实现了上述步骤，使用 appendChild() 方法将 HTML 代码追加到 div 中。
<html>
<head>
<title>
Appending HTML code to a div using JavaScript
</title>
</head>
<body>
<h3>
To Append HTML Code to a div Using JavaScript
</h3>
<p>
In this example we have used <strong>appendChild()
</strong> method to append HTML code to a div using
javascript.
</p>
<button onclick="appendHTML()">Click Me</button>
<div id="container">This is a paragraph using HTML.</div>
<script>
function appendHTML() {
let txt = document.getElementById('container');
let newEle = document.createElement('div');
newEle.textContent = 'Added using Javascript';
txt.appendChild(newEle);
}
</script>
</body>
</html>
使用 insertAdjacentHTML 方法
在这种方法中，我们使用了 HTML DOM 元素 insertAdjacentHTML() 方法将 HTML 代码追加到 div 中。它将 HTML 代码插入 HTML 文档中的任何指定位置。
- 我们创建了一个 div 容器，用于显示追加的 HTML 代码。
- 我们创建了一个按钮，单击该按钮时会触发函数 appendHTML。
- 在 appendHTML 函数中，我们使用 getElementById 选择了 div。然后，我们使用了 insertAdjacentHTML 方法，该方法接受两个参数，即 beforeend 和我们要追加到 div 容器中的 div 元素。
- beforeend 定义了 div 元素在 div 容器中追加的位置。它将 div 元素追加到 div 容器的结束标签之前。
示例
这是一个完整的示例代码，实现了上述步骤，使用 insertAdjacentHTML() 方法将 HTML 代码追加到 div 中。
<html>
<head>
<title>
Appending HTML code to a div using JavaScript
</title>
</head>
<body>
<h3>
To Append HTML Code to a div Using JavaScript
</h3>
<p>
In this example we have used <strong>insertAdjacentHTML()
</strong> method to append HTML code to a div using
javascript.
</p>
<button onclick="appendHTML()">Click Me</button>
<div id="container">This is a paragraph using HTML.</div>
<script>
function appendHTML() {
document.getElementById('container')
.insertAdjacentHTML('beforeend',
'<div>This is a new paragraph using Javascript.</div>');
}
</script>
</body>
</html>
使用 append 方法
在这种使用 JavaScript 将 HTML 代码追加到 div 的方法中，我们使用了 append() 方法。
- 我们创建了一个 div 容器，用于显示追加的 HTML 代码。
- 我们创建了一个按钮，单击该按钮时会触发函数 appendHTML。
- 在 appendHTML 函数中，我们使用 createElement() 方法创建了一个新的 div 元素，然后使用 textContent 属性将文本添加到新创建的 div 中。
- 最后，我们使用 append() 方法将新创建的 div 追加到 div 容器中。
示例
这是一个完整的示例代码，实现了上述步骤，使用 append() 方法将 HTML 代码追加到 div 中。
<html>
<head>
<title>
Appending HTML code to a div using JavaScript
</title>
</head>
<body>
<h3>
To Append HTML Code to a div Using JavaScript
</h3>
<p>
In this example we have used <strong>append()
</strong> method to append HTML code to a div using
javascript.
</p>
<button onclick="appendHTML()">Click Me</button>
<div id="container">This is a paragraph using HTML.</div>
<script>
function appendHTML() {
let txt = document.getElementById('container');
let newEle = document.createElement('div');
newEle.textContent = 'Added using Javascript';
txt.append(newEle);
}
</script>
</body>
</html>
结论
在本文中，我们了解了如何使用 JavaScript 使用四种不同的方法将 HTML 代码追加到 div 中。这四种不同的方法包括：innerHTML 属性、appendChild 方法、insertAdjacentHTML 方法和 append() 方法。
18K+ 浏览量
