javascript给html添加结点操作

最新推荐文章于 2024-07-18 11:30:00 发布

姜小白-

最新推荐文章于 2024-07-18 11:30:00 发布

阅读量7.2k

点赞数

分类专栏： javascript 文章标签： javascript appendChild insertBefore 表单 html

本文链接：https://blog.csdn.net/magi1201/article/details/43991157

版权

本文介绍了如何使用JavaScript的appendChild和insertBefore方法在HTML页面上动态添加和修改内容。详细讲解了从获取输入框内容到创建文本节点，再将文本节点放入段落并附加到页面指定位置的整个过程。

摘要由CSDN通过智能技术生成

html页面中的内容一般都是事先编写好的，用浏览器打开页面的时候，直接加载到页面上面的。如果想在一个页面上有一些交互性的操作，这时候javascript就派上用场了。那如果想在展现好的html页面上动态增加段落内容或修改段落内容，OK，段落对象的appendChild方法要派上用场了。

<html>
	<head>
		<title>Adding Nodes</title>
	</head>
	<body>
		<form action="#">
			<p><textarea id="contentArea" rows="5" cols="30"></textarea></p>
			<input type="button" value="Add some text to the page">
		</form>
	</body>
</html>

如上代码，展现出来是

如果想通过Add some text to the page 按钮给页面添加一些内容，那该如何操作呢？

给Add some text to the page 按钮的单击事件绑定一个操作，让这个操作去给页面添加内容。

结点后添加 appendChild

最低0.47元/天解锁文章

姜小白-

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
javascript给html添加结点操作

html页面中的内容一般都是事先编写好的，用浏览器打开页面的时候，直接加载到页面上面的。如果想在一个页面上有一些交互性的操作，这时候javascript就派上用场了。那如果想在展现好的html页面上动态增加段落内容或修改段落内容，OK，段落对象的appendChild方法要派上用场了。insertBefore 方法与 appendChild 方法不同：appendChild方法传递一个参数，由依附点来调用，传递要挂载的段落；insertBefore 方法由document.body调用，传递两个参数，要
复制链接

扫一扫

专栏目录