js 在html中添加内容显示和改变样式

最新推荐文章于 2021-06-04 09:36:31 发布

iteye_9424

最新推荐文章于 2021-06-04 09:36:31 发布

阅读量322

点赞数

文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/iteye_9424/article/details/82645665

版权

append()方法在被选元素结尾（仍然在内部）插入指定内容。

appendTo()和append()方法执行的任务相同。不同之处在于：内容的位置和选择器，以及append()能够使用函数来附加内容。

语法

$(selector).append(content)

content规定要插入的内容（可包含HTML标签）。

例：

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").append(" <b>Hello world!</b>");
  });
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>在每个 p 元素的结尾添加内容</button>
</body>
</html>

appendTo()例：

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("<b> Hello World!</b>").appendTo("p");
  });
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>在每个 p 元素的结尾添加内容</button>
</body>
</html>

css()方法返回或设置匹配的元素的一个或多个样式属性。

语法

$(selector).css(name,value)

例：

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").css("color","red");
  });
});
</script>
</head>

<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">改变段落的颜色</button>
</body>
</html>