javascript - html转json获取div数据

Question

我想将 html 页面 div 标签转换为 json 数据，并将该 div 附加到另一个 html 页面中。使用 id 获取该 div。

假设有一个page.html，其中有div标签，id为page1 page2等。将它们转换为json数据并根据其id获取div标签，然后将这些div标签附加到page2.html div标签。如何做到这一点。

这是page2.html

<div id="page1">
this is page1

</div>

<div id="page2">
this is page1
</div>

<div id="page3">
this is page1
</div>

<div id="page4">
this is page1
</div>

有div标签

我尝试使用 js 获取 div，但从另一个页面获取 这是page1.html，想要访问page2.html的div

function getdata()
        {
            $.get('page2.html', null, function(text){
                  alert($(text).find('#page1'));
                });
            var json = JSON.stringify(element);
            alert(json);
        }

我尝试过这个，但它不起作用。

Answer 1

您需要在 json 字符串中写入 div 对象，将 div 转换为包含所有必需属性和值的 json 对象。 例如，请参见下面的代码片段。

function append(){

  var element = document.getElementById("page1");
  var jsonObject = {};
  jsonObject.id = element.id;
  jsonObject.innerHTML = element.innerHTML;

  var jsonString = JSON.stringify(jsonObject); // this is json for your div. 

  /// for append div and get div object back from json.
  
  var elementProto = JSON.parse(jsonString);
  
  var element = document.createElement("DIV");
  element.innerHTML = elementProto.innerHTML;
  element.id = elementProto.id;
  
  
  // append to container (in your case its page 1 or 2)
  
  document.getElementById("container").append(element);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="page1">
  <p>this div will appended </p>
</div>

<button onclick="append()">append div</button>

<div id="container">

</div>