JavaScript如何在div中动态生成<p>

JavaScript019

JavaScript如何在div中动态生成<p>,第1张

1、获取div节点

var div = document.getElementById('divid')//获取一个id是divid的div节点，往这个节点中添加p节点

2、动态生成p节点

var p = document.createElement('p')//创建p节点

p.innerHTML = '显示的文字'//p节点显示的文字

3、往div中通过appendChild添加p节点

div.appendChild(p)//往div中添加p节点

关于你的提问，我通过添加一个Input标签实现的，代码如下：

<html xmlns="

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />

<title>无标题文档</title>

<script type="text/javascript">

function keydownAddP(evt) { // 当input标签接收到回车时，执行本方法

evt = (evt) ? evt : ((window.event) ? window.event : "")

keyCode = evt.keyCode ? evt.keyCode : (evt.which ? evt.which : evt.charCode)

if (keyCode == 13) {

//创建一个P标签

var newP = document.createElement('p')

newP.innerHTML = "新的P标签"

//添加新P标签

var con = document.getElementById('con')

con.appendChild(newP)

}

}

</script>

</head>

<body>

<input onkeydown="keydownAddP(event)" type="text" />

<hr />

<div id="con" style="border:1px solid redwidth:500pxheight:300px">

<p>原来的P标签</p>

</div>

</body>

</html>

let p = document.createElement('p')

p.innerText = "愉快的假期开始了,我计划？"

document.body.appendChild(p)