jquery属性操作 html() prop()

1、html() 取出或设置html内容

// 取出html内容

var $htm = $('#div1').html();

// 设置html内容

$('#div1').html('<span>添加文字</span>');

使用html()相当于原生javascriptinnerHtml,即可以获取元素的之间的html内容,还可以创建新的html元素。

示例:首先写一个取出html内容的示例

示例:修改#box1的div的html内容。

可以看到内部的html内容已经修改了。

示例:给新增的div设置class样式类,并提前写好样式类

从上面这个示例可以看出,如果我们需要随时新建一个新的元素,那么可以提前写好样式,然后在创建html元素的时候加上即可。

2、prop() 取出或设置某个属性的值

// 取出图片的地址

var $src = $('#img1').prop('src');

// 设置图片的地址和alt属性

$('#img1').prop({src: "test.jpg", alt: "Test Image" });

这是关于设置属性值的操作。我们可以继续上面的示例,获取一下新创建内部div的属性值。

示例:获取新创建div的class属性值

示例:设置一个新的属性值

关于评论中innerHTML不会执行脚本的回复:是可以执行脚本的。

有位这么积极的朋友提出观点我很高兴哈,但是innerHTML不会执行脚本这个,我是想说,这位朋友把innerHTMLinnerText搞混了。

那么下面我来演示一下innerHTML执行脚本的示例,如下:

首先编写一个不执行任何js的HTML,就一个div

然后编写JavaScript,使用innerHTML写入一个a标签,然后a标签点击执行一个js脚本

点击a标签,触发执行js方法,如下:

然后可以发现,脚本执行了。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="jquery/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        window.onload = function(){
            var div = document.getElementById('box1');
            // alert(div.innerHTML);

            js_method = function(){
                alert("点击a标签");
            }

            // div.innerText = "<a href='javascript:js_method();'>点击ok</a>";

            div.innerHTML = "<a href='javascript:js_method();'>点击ok</a>";

            // $('#box1').html("<a href='javascript:js_method();'>点击ok</a>");
        }
    </script>
</head>
<body>
    <div id="box1">这是一个div</div>
</body>
</html>

那么如果执行的使用jqueryhtml()呢?

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="jquery/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        window.onload = function(){
            // var div = document.getElementById('box1');
            // alert(div.innerHTML);

            js_method = function(){
                alert("点击a标签");
            }

            // div.innerText = "<a href='javascript:js_method();'>点击ok</a>";

            // div.innerHTML = "<a href='javascript:js_method();'>点击ok</a>";

            $('#box1').html("<a href='javascript:js_method();'>点击ok</a>");
        }
    </script>
</head>
<body>
    <div id="box1">这是一个div</div>
</body>
</html>

你可以发现innerHTMLhtml()都是可以解析html基本元素语句,这个才是可以执行脚本的关键。

关于评论中说innerHTML不能执行脚本, 继续真相图:

其实,关键一点是看方法是否有解析html标签等元素,如果不能解析,就无法执行脚本。

例如:使用innerText就无法执行脚本,如下:

哦,还有jquery的text()也是无法解析html,所以也无法执行脚本

大概如此,祝五一快乐!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券