×

JavaScript将HTML代码添加到盒元素里

作者:andy0012019.12.25来源:Web前端之家浏览:8016评论:0
关键词:htmljs

在JavaScript中将HTML代码附加到div里的方法有两个:使用innerHTML属性或使用insertAdjacentHTML()方法。

1、使用innerHTML属性

要使用innerhtml属性追加HTML代码,首先选择要追加代码的元素(div)。然后,使用innerhtml上的+=运算符添加将字符串括起来的代码。

语法:

element.innerHTML += "HTML代码"

或者

element.innerHTML = element.innerHTML + "HTML代码"

示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>使用JavaScript将HTML代码附加到div</title>
		<style> 
        body { 
            text-align: center; 
              
            padding: 5%; 
        } 
        div{
        	border: 2px dashed #D4AF37;
        }
        h1{ 
            color:red; 
        } 
    </style> 
</head> 
  
<body> 
    <div id="add_to_me">
    	<h1>div标签内</h1>
        <p>这是已经输入到div中的文本</p> 
    </div><br />
  
    <button onclick="addCode()">添加内容</button> 
    <script> 
        function addCode() { 
            document.getElementById("add_to_me").innerHTML +=  
              "<h3>这是JS插入的文本</h3>"; 
        } 
    </script> 
</body> 
  
</html>

2、使用insertAdjacentHTML()方法

可以使用insertAdjacentHTML()方法将HTML代码附加到div。但是,你需要选择一个元素里面的div来添加代码。此方法有两个参数:

● 要插入代码的位置(在文档中)('afterbegin','beforebegin','afterend','beforeend')

● 要插入用引号括起来的HTML代码

语法:

elementInsideDiv.insertAdjacentHTML('afterend', '附加HTML代码');

示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>使用JavaScript将HTML代码附加到div</title>
		<style> 
        body { 
            text-align: center; 
            padding: 5%; 
        } 
        div{
        	border: 2px dashed #D4AF37;
        }
        h1{ 
            color:red; 
        } 
    </style> 
</head> 
  
<body> 
    <div id="add_to_me"> 
        <h1>div标签内</h1>
        <p id="add_after_me">这是已经添加到div中的文本</p> 
    </div><br>
  
    <button onclick="addCode()">添加内容</button> 
    <script> 
        function addCode() { 
            document.getElementById("add_after_me").insertAdjacentHTML("afterend", 
                "<h3>这是使用JS插入的文本</h3>"); 
        } 
    </script> 
</body> 
  
</html>

注意:如果您将HTML代码作为用户的输入,则不应以这种方式插入HTML代码。它打开您的网站跨站脚本漏洞。

您的支持是我们创作的动力!
温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/jshtmlgjdfjglkjfdkl.html

网友评论文明上网理性发言 已有0人参与

发表评论: