时间戳

首页 > 解决方案 > jquery将一个html元素复制到一个字符串

javascript - jquery将一个html元素复制到一个字符串

问题描述

如何正确地将 html 元素复制到字符串。我使用 Metroui，第 4 版。它们有一个特殊的输入类，其中一个 X 会通过单击弹出，您可以删除您在输入中输入的值。 https://metroui.org.ua/input.html

当我将 html 元素复制到 var 时，这个 X 什么都不做，但是当我用字符串定义一个 var 并附加它时，它就可以工作了。当我用元素 id 获取它时，已经从 Metro js 注入了 javascript 代码，因为我使用这个 data-role="input"，然后 metroui js 做一些事情。如何获得与 var div 相同的字符串？像它在编辑器中显示的纯html？或者这不可能，因为 jquery 只能读取 dom？这样我就可以阅读这个纯 html

        <span id="section-one-a1">
            <div class="p_scnt" id="p_scnt" name="p_scnt">Test 1</div>
                <input value="val1" id="val1" type="text" data-role="input" />
        </span>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://cdn.metroui.org.ua/v4/css/metro-all.min.css">
    <script src="https://cdn.metroui.org.ua/v4/js/metro.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>        
        $(function(){
            $('#addScnt').on('click', function() {

                var div = $('<span id="section-one-a1">'+
                '<div class="p_scnt" id="p_scnt" name="p_scnt">Test 1</div>'+
                '<input value="val1" id="val1" type="text" data-role="input" />'+
                '</span>');
                //console.log(div);

                var newdiv = $('#section-one-a1').prop('outerHTML').replace(/(\r\n|\n|\r|\t)/gm,"");
                console.log(newdiv)

                var test = $(newdiv);

                $(div.appendTo("#p_scents"));

                return false;
            });
        });

    </script>
  </head>
  <body id="main">
    <ul id="test">
        <li>
            <a href="#" id="addScnt">new</a>
        </li>
    </ul>
    
    <div id="p_scents">
        <span id="section-one-a1">
            <div class="p_scnt" id="p_scnt" name="p_scnt">Test 1</div>
                <input value="val1" id="val1" type="text" data-role="input" />
        </span>
    </div>
  </body>
</html>

标签： javascripthtmljquery

解决方案

我是这样做的，不，也许不是很好，但是可以。在输入 data-role 时，删除 MetroUI JS 在 html 中注入的元素和属性，然后它就可以工作了。当它通过 appendto 进入 dom 时，metroui JS 注入了新的。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://cdn.metroui.org.ua/v4/css/metro-all.min.css">
    <script src="https://cdn.metroui.org.ua/v4/js/metro.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>        
        $(function(){
            $('#addScnt').on('click', function() {
                var div1 = $('<span id="section-one-a1">'+
                '<div class="p_scnt" id="p_scnt" name="p_scnt">Test 1</div>'+
                '<input value="val1" id="val1" type="text" data-role="input" />'+
                '</span>');
                //console.log(div);

                var newdiv = $('#section-one-a1').clone().html().replace(/(\r\n|\n|\r|\t)/gm,""); // string
                var replace = newdiv.replace('<div class="input">',''); // replace input
                replace = replace.replace('data-role-input="true"',''); // replace data-role-input
                replace = '<span id="section-one-a1">'+replace+'</span>';
                var div = $(replace); // to object
                div.find(".button-group").remove(); // remove button-group
                //console.log(test)
                $(div.appendTo("#p_scents"));
                return false;
            });
        });
    </script>
  </head>
  <body id="main">
    <ul id="test">
        <li>
            <a href="#" id="addScnt">new</a>
        </li>
    </ul>
    
    <div id="p_scents">
        <span id="section-one-a1">
            <div class="p_scnt" id="p_scnt" name="p_scnt">Test 1</div>
                <input value="val1" id="val1" type="text" data-role="input" />
        </span>
    </div>
  </body>
</html>

推荐阅读