jquery 字串轉dom對象
- PHPz原創
- 2023-05-28 10:56:07720瀏覽
在前端開發中，我們經常需要操作DOM對象，而有時我們需要將字串轉換為DOM對象。 jQuery框架為我們提供了很方便的方法來實現這項需求。
下面是一個例子，在HTML文件中有一個按鈕和一個div元素，我們可以透過點擊按鈕，將輸入框中的字串轉換成一個新的div元素加入到頁面上。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery字符串转DOM对象</title>
<style>
#container {
width: 200px;
height: 200px;
border: 1px solid black;
margin: 50px auto;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div id="container">
<button id="btn">添加元素</button>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#btn").on("click", function() {
var inputStr = prompt("请输入字符串：");
var newDiv = $("<div></div>").text(inputStr); // 将字符串转换为DOM对象
$("#container").append(newDiv); // 添加新的div元素
})
})
</script>
</body>
</html>我們透過jQuery的方法$("dc6dce4a544fdca2df29d5ac0ea9906b16b28748ea4df4d9c2150843fecfba68")建立一個新的div對象，接著使用.text(inputStr)將輸入框中的字串作為新的div元素內容。透過.append(newDiv)將新的div元素加入到#container中。
使用jQuery可以非常方便的將字串轉換為DOM對象，大大簡化了我們的工作。
以上是jquery 字串轉dom對象的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn