jquery 문자열을 dom 객체로-프런트엔드 Q&A-php.cn

jquery 문자열을 dom 객체로

PHPz

풀어 주다： 2023-05-28 10:56:07

원래의

720명이 탐색했습니다.

프론트엔드 개발에서는 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 메소드를 통해 #container에 새 div 요소를 추가합니다$("<div></div>")创建一个新的div对象，接着使用.text(inputStr)将输入框中的字符串作为新的div元素内容。通过.append(newDiv).

jQuery를 사용하면 문자열을 DOM 객체로 변환하는 것이 매우 편리해 작업이 크게 단순화됩니다.

위 내용은 jquery 문자열을 dom 객체로의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!