jquery string to dom object-Front-end Q&A-php.cn

jquery string to dom object

PHPz

Release： 2023-05-28 10:56:07

Original

720 people have browsed it

In front-end development, we often need to operate DOM objects, and sometimes we need to convert strings into DOM objects. The jQuery framework provides us with a very convenient way to achieve this requirement.

The following is an example. There is a button and a div element in the HTML document. We can click the button to convert the string in the input box into a new div element and add it to the page.

<!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>

Copy after login

We use the jQuery method$("<div></div>")Create a new div object, and then use .text(inputStr)Use the string in the input box as the content of the new div element. Add a new div element to the #container via .append(newDiv).

Using jQuery can easily convert strings into DOM objects, which greatly simplifies our work.

The above is the detailed content of jquery string to dom object. For more information, please follow other related articles on the PHP Chinese website!