操作标签文本

最新推荐文章于 2024-07-12 16:27:40 发布
最新推荐文章于 2024-07-12 16:27:40 发布
阅读量69 收藏
点赞数
分类专栏： javaScript 文章标签： javascript Powered by 金山文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/booker009/article/details/128543554
版权

innerHtml 操作双标签中间的HTML

innerText 操作双标签中间的 Text

value 操作表单标签值

<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title></title>
                <style>
                        div{
                                border: 1px solid red;
                                width: 200px;
                                height: 200px;
                        }
                </style>
                <script>
                        function fun1(){
                                var element1=document.getElementById("d1");
                                
                                /*
                                 * innerText  不包含HTML结构
                                 * innerHTML  包含HTML结构
                                 * */
                                
                                console.log("innerText>>>"+element1.innerText);
                                console.log("innerHTML>>>"+element1.innerHTML);
                                
                                
                                var element2=document.getElementById("i1");
                                console.log(element2.value)
                        }
                        function fun2(){
                                var element1=document.getElementById("d1");
                                //element1.innerText="<h1>一刻也不能分割</h1>"
                                element1.innerHTML="<h1>一刻也不能分割</h1>"
                                
                                var element2=document.getElementById("i1");
                                element2.value="无论我走到哪里";
                                
                        }
                </script>
        </head>
        <body>
                <div id='d1'>
                        a
                        <span>文字</span>
                        b
                </div>
                
                <input type="text" value="我和我的祖国" id='i1' />
                
                <input type="button" value="获取内容"  onclick="fun1()"/>
                <input type="button" value="修改内容"  onclick="fun2()"/>
        </body>
</html>

增加删除节点

创建元素createElement()

增加元素appendChild()

删除元素removeChild()

<!DOCTYPE html>
<html>
        <head>
                <meta charset="utf-8">
                <title></title>
                <style>
                        #d1{
                                border: 1px solid red;
                                width: 80%;
                                height: 200px;
                        }
                </style>
                <script>
                        function fun1(){
                                var div1=document.getElementById("d1");
                                // 通过JS创建标签
                                var in1=document.createElement("input");
                                in1.setAttribute("type","text");
                                in1.setAttribute("value","请输入内容");
                                
                                var in2=document.createElement("input");
                                in2.setAttribute("type","password");
                                in2.setAttribute("value","123456789");
                                
                                var in3=document.createElement("input");
                                in3.setAttribute("type","button");
                                in3.setAttribute("value","删除");
                                
                                var br=document.createElement("br");
                                
                                in3.onclick=function (){
                                        div1.removeChild(in1)
                                        div1.removeChild(in2)
                                        div1.removeChild(in3)
                                        div1.removeChild(br)
                                }
                                div1.appendChild(in1);
                                div1.appendChild(in2);
                                div1.appendChild(in3);
                                div1.appendChild(br);
                        }
                </script>
        </head>
        <body>
                <div id="d1">
                        
                </div>
                <input type="button" value="增加" onclick="fun1()" />
        </body>
</html>

案例开发

<!DOCTYPE html>
<html>
        <head>
                <meta charset="utf-8" />
                <title></title>
         		<script>
         			function fun1(){
         				var outerDiv =document.getElementById("outerDiv"); 
         				// 1000
         				var left =Math.floor(Math.random()*1000)
         				// 500
         				var top =Math.floor(Math.random()*500)
         				
         				
         				outerDiv.style.marginTop=top+"px";
         				outerDiv.style.marginLeft=left+"px";
         			}
         			
         			function  fun2(){
         				alert("love you too")
         			}
         			
         		</script>
                <style>
                        #outerDiv{
                                width: 200px;
                                height: 200px;
                                border: 1px solid gold;
                                background-color: gray;
                                text-align: center;
                                margin-top: 200px;
                                margin-left: 200px;
                        }
                        #outerDiv input{
                                width: 50px;
                                height: 50px;
                                margin: 20px;
                        }
                </style>
        </head>
        <body >
                <div id="outerDiv">
                        <h3>do you love me?</h3>
                        <input type="button" value="是" onclick="fun2()"/>
                        <input type="button" value="否" onmouseover="fun1()"/>
                </div>
        </body>
</html>

BookerABC
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js 实现 HTML 的拼接
qq_34851243的博客
05-14 1万+
在实际项目中 经常会用到利用 js 实现动态的添加前端代码，如动态添加图片和表格。 js 动态添加 html 代码主要有两种方法： 1、appendChild( ) 来实现节点以及文本内容的添加。 2、拼接标签字符串，并用 innerHTML 来添加。 具体实例： 1、appendChild( ) 方法： //通过 createElement()方法来添加一个 p 元素 var...
易语言标签远程显示文本
07-19
易语言是一种专为初学者设计的...总的来说，“易语言标签远程显示文本”涉及易语言的基本控件操作、网络编程以及跨进程通信技术。通过理解和掌握这些知识点，开发者可以创建出具有动态信息更新功能的易语言应用程序。
innerHTML动态拼接html,innerHTML动态添加html代码和脚本兼容多个浏览器
weixin_35754676的博客
06-09 1497
innerHTML动态添加html代码和脚本兼容多个浏览器发布于 2017-02-04 10:36:56 | 94 次阅读 | 评论: 0 | 来源: 网友投递JavaScript客户端脚本语言Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户...
JavaScript中textContent、innerText和innerHTML的用法以及区别
热门推荐
秦哥的博客
09-15 6万+
目录 0.码仙励志 1.textContent的用法 1.设置标签中的文本内容  2.获取标签中的文本内容  2.innerText的用法 1.设置标签中的文本内容 2.获取标签中的文本内容 3.innerHTML的用法 1.设置标签中的文本内容 2.获取标签中的文本内容 4.innerText和textContent的区别 1.兼容代码设置任意的标签中间的任意文本内容 ...
JQuery操作
a_shun66的博客
11-17 438
JQuery基本操作jQuery中的DOM操作样式操作内容及Value值操作节点及节点属性操作节点遍历 jQuery中的DOM操作 样式操作 添加样式 addClass() $(document).addClass('bg'); 删除样式 removeClass() $(document).removeClass('bg'); 是否包含样式 hasClass() $(document).hasClass('bg'); 切换样式 toggleClass() $('di
js中的innerText、innerHTML、属性值、value与jQuery中的text()、html()、属性值、val()总结...
weixin_33672400的博客
07-08 534
js与jQuery获取text、html、属性值、value的方法是不一样的。 <p id="test">这是段落中的 <b>粗体</b> 文本。</p> 有上面这样一个文本框js获取text、html、属性值、value的方法： document.getElementById("test").innerText； document.getE...
jQuery 改变P标签文本值方法
01-19
查了下，使用jQuery HTML 操作完成操作。 函数 描述 $(selector).html(content) 改变被选元素的（内部）HTML $(selector).append(content) 向被选元素的（内部）HTML 追加内容 $(selector).prepend(content...
JAVA过滤标签实现将html内容转换为文本的方法示例
08-30
本文主要介绍了使用JAVA过滤标签实现将html内容转换为文本的方法，涉及java针对HTML代码的正则替换相关操作技巧。以下是实现该方法的详细知识点： 1. 使用正则表达式去掉HTML标签：在将html内容转换为文本时，需要...
jQuery获取标签文本内容和html内容的方法
12-12
在这个例子中，我们有一个`<p>`标签，其ID为`test`，包含了一些文本和加粗的文本。 1. 获取文本内容： jQuery提供了`.text()`方法来获取或设置元素的纯文本内容，不包括任何HTML标签。在示例代码中，`$("#test")....
C#多标签文本编辑器
04-27
【C#多标签文本编辑器】是一个基于C#编程语言开发的应用程序，它扩展了传统Windows记事本的功能，提供了一个更加便捷和功能丰富的文本编辑环境。在这款编辑器中，用户可以同时处理多个文本文件，每个文件在一个独立...
给innerText赋值的问题
weixin_30684743的博客
11-27 904
innerHTML我就不说了 这个就是你在开发工具里看到的内容 如果你给一个元素的innerText赋值，这个元素还有子元素，那么子元素也会被抹去，这样会导致js错误，在你下次对子元素引用的时候，NULL指针出现 举个栗子 1 <div id="ruiruige"> 2 这里是文字<label id="sub_label">label是子元素<...
js中innerHTML与innerText的用法与区别
baidu_41931024的博客
07-25 9170
1、js中innerHTML的用法： innerHTML可获取或设置指定元素标签内的 html内容，从该元素标签的起始位置到终止位置的全部内容(包含html标签)。 获取元素的内容：element.innerHTML; 给元素设置内容：element.innerHTML =htmlString; 代码示例为： 获取段落p的 innerHTML document.getElementById(“te...
关于利用jquery获得innerText的问题
荒野之鹰
05-15 8109
我的前端不怎么好，所以若是有什么错误，各位看官嘴下留情。 今天写上传文件时遇到了一个问题。前端把上传文件的名字写在span里了，因为是多个文件上传，所以我用的class来获得的对象。 html是这样 js是var files = $(".fileName"); // 遍历数组 for(var i=0;i<files.length-1;i++){ fileName = files[
innerHTML和innerText的区别
qq_32849999的博客
05-21 3039
common.js代码function  my$(id) {  return  document.getElementById(id);}&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt;    &lt;meta charset="UTF-8"&gt;    &lt;title&gt;Title&lt;/title&amp
value,innerHTML,innerText和val(),html(),text()的区别
weixin_40626699的博客
01-18 1330
innerHTML,.val(),.text()区别
js中innerHTML和innerText jQuery中html()和text()的区别
cp3___的博客
04-26 2204
js中innerHTML和innerText的区别 innerHTML innerHTML 会将标签和标签中的内容否获取回来 innerHTML .innerHTML = ‘<p></p>’; 只会将文本内容解析出来，不会显示标签 innerText innerText 只会将标签中的内容获取回来，不会获取标签 innerTex...
jquery中 html() text() val() innerText总结
jacky_zh的专栏
12-04 2万+
首先把总重要的总结下来 jQuery封装的方法html,text,val .html()用为读取和修改元素的HTML标签 .text()用来读取或修改元素的纯文本内容 .val()用来读取或修改表单元素的value值。 一看黑体的部分，所以把text和html分为一组，他们都是对元素取值或设置，只有val是对表单元素的。 他们的共同点： html和val 都是读取时，
jQuery中没有innerText、innerHtml
azrael6619的专栏
09-19 753
本人第一次使用jQuery。 发现如果我在div或者其他非表单的标签中赋值，原本用普通的js就直接document.getElementById("id").innerHtml（或者其他几个）就可以了。 但是在jQuery中不行 例如： document.getElementById("t").innerHTML="ddddddddddd";     -----------A $("#t...
更新商品前端接口编写
最新发布
weixin_55639995的博客
07-12 404
那么在vue运行的时候,会加载所有的ref属性特征的元素还有组件。标签中ref的作用就是将 该组件注册到vue对象的ref属性中。使用插槽,那个scope就是代表着一行的数据。然后里面的选项遍历的是 js定义的数据。如果文字显示过多可以使用 文本隐藏显示。表单绑定还有表单数据的绑定。数据绑定使用的表单绑定状态。写form表单然后封装数据。状态的选择使用的是选择框。副标题使用的是文本域。状态页面使用,下拉框。富文本选择器使用组件。使用后端枚举类型去写。
QTreeWidgetItem获取标签文本
08-03
获取标签文本后，可以将其用于需要的操作，例如显示在UI界面上或进行进一步的处理。 需要注意的是，QTreeWidgetItem的text()方法返回的是QVariant类型的数据。如果需要将其转换为QString类型的数据进行使用，可以...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值