js 通过innerHTML写入内容操作元素的文档节点

最新推荐文章于 2022-02-21 12:52:55 发布
最新推荐文章于 2022-02-21 12:52:55 发布
阅读量1.7k 收藏 1
点赞数 2
分类专栏： javaScript 文章标签： javaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43294560/article/details/102904207
版权 
操作元素文档结构

	通过innerHTML
		**增加节点**
			innerHTML+=innerHTML+"节点标签"
				showdiv.innerHTML=showdiv.innerHTML+"<div><input type='file' name='' id='' value=''/ ><input type='button' value='删除' onclick='t2(this)'/></div>"

		**删除节点**
		
			删除所有子节点
				父节点.innerHTML="";
				
			删除一个节点
				父节点.removeChild(子节点对象);
				通过父级元素删除子节点,将删除元素放在子div，通过父div删除子div实现删除
			
					onclick='t2(this)'
						function t2(btn)
					{
						/*获取父div*/
						var showdiv=document.getElementById("showdiv");
						/*获取子div*/
						var cdiv=btn.parentNode;
						/*父div删除子div*/
						showdiv.removeChild(cdiv);
					}

代码示例：

<html>
	<head>
		<title>js 操作元素的文档结构1</title>
		<meta charset="utf-8"/>
		<script type="text/javascript">
			function t1()
			{
				var showdiv=document.getElementById("showdiv");
				showdiv.innerHTML=showdiv.innerHTML+"<div><input type='file' name='' id='' value=''/ ><input type='button' value='删除' οnclick='t2(this)'/></div>"
			}
			
			function t2(btn)
			{
				/*获取父div*/
				var showdiv=document.getElementById("showdiv");
				/*获取子div*/
				var cdiv=btn.parentNode;
				/*父div删除子div*/
				showdiv.removeChild(cdiv);
			}
			
		</script>
	</head>
	<body>
		<input type="button" name="" id="" value="继续上传" onclick="t1()" />
		<hr />
		<div id="showdiv">

		
		
		</div>
		
	</body>
</html>
神奇大叔
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js innerHTML
weixin_30722589的博客
09-06 111
element.innerHTML += 或 = 都是对 element 的重新赋值渲染， 所以 当页面元素足够多或者有其它程序需要某些元素时 document.body.innerHTML element.innerHTML 就会有影响， 比如某些程序挂掉之类的， 所以在用 innerHTML 的时候 需要多加注意 转载于:https://www.cnblogs.com/lcysgsg/p/7...
js如何增加html节点,js怎么添加元素新节点？（图文详解）
weixin_39554891的博客
06-10 1985
js怎么添加元素新节点？本篇文章就给大家介绍在js中如何实现添加元素新节点的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。js要添加元素新节点，就必须先创建好新的元素节点，然后在把新的元素节点添加到html页面上。下面我们通过一个简单的代码示例来详细了解JavaScript要添加元素新节点的方法。js添加元素新节点#div{width: 200px;height: 150p...
JS中使用innerHTML和createElement方式动态创建元素
qq_45516629的博客
03-24 1074
方式一：使用innerHTML拼接字符串方式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...
js中innerHTML，innerText，outerHTML textContent 的用法和区别
qq_29956725的博客
04-15 666
用法： <div id="test"> <span style="color:red">test1</span> test2 </div> 在JS中获取值如下： test.innerHTML:也就是从对象的起始位置到终止位置的全部内容,包括Html标签。 上例中的test.innerHT...
关于innerHTML的用法,以及数据覆盖问题
m0_46642164的博客
02-21 3782
JavaScript innerHTML使用及数据覆盖问题的解决
用原生 JS 实现 innerHTML 功能实例详解
10-17
innerHTML属性是JavaScript中用于获取或设置HTML文档中元素的内容。通过这个属性，开发者可以读取和写入元素节点内部的HTML。在原生JavaScript中，若要手动实现innerHTML的效果，即把HTML字符串转换为DOM元素并插入...
用JavaScript获取页面文档内容的实现代码
10-22
在JavaScript中，获取页面文档内容主要通过操作`document`对象来实现。`document`对象是浏览器提供的一种全局对象，它代表了当前打开的HTML或XML文档，并提供了与文档交互的各种方法和属性。以下将详细解释如何使用...
JS把内容动态插入到DIV的实现方法
10-21
在JavaScript中，动态地将内容插入到HTML的`<div>`元素中是一种常见的操作，尤其在构建交互式网页和响应用户行为时。本篇将详细解释两种不同的方法来实现这一功能，通过`innerHTML`属性和使用`createElement`、`...
js print打印网页指定区域内容的简单实例
11-28
3. **获取要打印的内容**：`obj.innerHTML` 返回指定元素的所有子节点的HTML内容。在这个例子中，它是`div#print`内的所有内容。 4. **写入新窗口**：`newWindow.document.write(docStr)` 将获取到的HTML内容写入新...
JS实现读取xml内容并输出到div中的方法示例
10-18
3. **处理响应**：`xmltext.responseXML` 属性返回XML文件的内容，作为DOM（Document Object Model）对象，允许我们通过JavaScript进行解析和操作。 4. **DOM遍历**：`getElementsByTagName()` 方法用于选取XML文档...
JS使用innerHTML的注意事项
EGeek
10-31 1421
JS与HTML之间的注意事项 innerHTML innerHTML用于获取元素内部的HTML代码。 对于自结束标签，这个属性没有意义，如。 如果需要读取元素节点属性，直接使用元素.属性名。 例如：元素.id 元素.name 元素.value 特例：class属性不能采用这种形式，读取class需要使用元素.className，因为class是保留字。 ...
js——添加或删除元素节点（append 和 innerHtml） 节点访问关系 节点属性
热门推荐
肖的博客
08-24 1万+
1、append原理： //添加 var para=document.createElement('p');//创建新的p标签 var node=document.createTextNode('这是一个段落');//创建一个文本节点 para.appendChild(node);//向p追加此文本节点 para.className=&amp;amp;amp;quot;lucky&amp;amp;amp;quot;;//向...
向html中添加节点
weixin_30299709的博客
09-24 332
简单： ①，js中： 1 (function () { 2 3 var box=document.querySelector("#box"); 4 5 var con1=document.createElement("div"); 6 7 box.appendChild(con1); 8 9 })(); ②，jQuery中： 1 ...
js 将html字符串转换成node节点三种方式
weixin_43294560的博客
12-16 8473
1、innerHTML <script> function createNode(txt) { const template = `<div class='child'>${txt}</div>`; let tempNode = document.createElement('div'); tempNode.innerHTML = template; return tempNode.firstChild; } const container = d
用innerHTML创建元素
双木荼的博客
05-11 4274
用.innerHTML偷懒创建元素
JavaScript DOM innerHTML和innerText修改元素内容
grace_it的博客
07-02 9743
在上一篇删除子节点的文章中，有提到一个属性innerHTML，元素对象都有innerHTML属性和innerText属性，但一般不用innerText属性，因为有浏览器兼容性问题，大多浏览器都不支持。 innerHTML属性：表示标签中内容，此内容可以是标签，也可以是纯文本。 innerText属性：表示标签中文本内容，此内容只能是纯文本，如果存在标签，则原样输出。 var h1 = docu...
javascript中利用innerHTML制作简易的动态表格
u010658676的博客
08-09 1485
html代码以及css代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动态表格</title> <style> table{ border: 1px s...
DOM操作指南：解析元素、属性与文本节点
每个元素都有自己的属性和方法，比如修改元素内容的`innerHTML`属性或改变样式表的`style`对象。 3. attribute对象：表示元素的属性，如`<input type="text" name="username">`中的`type`和`name`。可以使用`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值