Question

我想将html页面div标签转换为json数据，并将该div附加到另一个html page.get，即使用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>

Answer 2

尝试使用此代码获取div内容

function getdata()
    {
        $.get('page.html', null, function(text){
              alert($('#page1').html());
            });
jsonObj = $('#page1').html();
        var obj = $.parseJSON(jsonObj);
        alert(obj );
    }

Answer 3

请检查getdata()

中的以下代码示意图

jQuery.get('page2.html',null,function(response){
    var obj = jQuery('<div/>');
    var json = {};
    jQuery(obj).append(response);
    jQuery('[id^="page"]',obj).each(function( index, object ){
        json[index] = jQuery(object).text();
    });
    console.log(json);
});

html到json获取div数据

3 个答案: