在前端开发中，我们经常需要操作DOM对象，而有时我们需要将字符串转换为DOM对象。jQuery框架为我们提供了很方便的方法来实现这一需求。 下面是一个例子，在HTML文档中有一个按钮和
在前端开发中，我们经常需要操作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的方法$("<div></div>")创建一个新的div对象，接着使用.text(inputStr)将输入框中的字符串作为新的div元素内容。通过.append(newDiv)将新的div元素添加到#container中。
使用jQuery可以非常方便的将字符串转换为DOM对象，大大简化了我们的工作。