javascript代码获取html标记信息并存储在js代码中的变量中

Question

我有一个包含内容和按钮的html页面。单击getData按钮时，将调用javascript函数，我必须将每个html标记信息存储到变量中。

演示：https://plnkr.co/edit/wuIsu1qhcrYeoxtkrGxC?p=preview

js code：

function getData(){
        var $divs = $('.div1')      
        alert($divs);   //[object Object] is printed
      //var p_tags;
      //var ul_tags;
    }

html代码：

 <div>
        <button onClick="getData()">GetData</button>

   <div class="div1">
<p>The identity of the longest word in English depends upon the definition of what constitutes a word in the English language, as well as how length should be compared. In addition to words derived naturally from the language's roots (without any known intentional invention), English allows new words to be formed by coinage and construction; place names may be considered words; technical terms may be arbitrarily long. Length may be understood in terms of orthography and number of written letters, or (less commonly) </p>

<p><span style="color: rgb(34, 34, 34); font-family: sans-serif; font-style: italic;">This article is about the Internet encyclopedia. For Wikipedia's home page, see&nbsp;</span><a href="https://en.wikipedia.org/wiki/Main_Page" title="Main Page" style="color: rgb(11, 0, 128); background-image: none; background-color: rgb(255, 255, 255); font-family: sans-serif; font-style: italic;">Wikipedia's Main Page</a><span style="color: rgb(34, 34, 34); font-family: sans-serif; font-style: italic;">. For Wikipedia's visitor introduction, see&nbsp;</span><a href="https://en.wikipedia.org/wiki/Wikipedia:About" title="Wikipedia:About" style="color: rgb(11, 0, 128); background-image: none; background-color: rgb(255, 255, 255); font-family: sans-serif; font-style: italic;">Wikipedia's About Page</a><span style="color: rgb(34, 34, 34); font-family: sans-serif; font-style: italic;">. For other uses, see&nbsp;</span><a href="https://en.wikipedia.org/wiki/Wikipedia_(disambiguation)" class="mw-disambig" title="Wikipedia (disambiguation)" style="text-decoration-line: underline; color: rgb(11, 0, 128); background-image: none; background-color: rgb(255, 255, 255); font-family: sans-serif; font-style: italic;">Wikipedia&nbsp;</a></p>
<ul><li>one</li><li>two</li></ul>
  </div></div>

Answer 1

您尝试通过alert输出的是jQuery对象。浏览器alert无法显示对象的详细信息 - 而是打印[object Object]。

但是，如果你尝试console.log($divs)，你可以看到jQuery对象的细节，你可以在其上执行各种方法来操作DOM。

例如，您可以像这样获取所选<div>的内部HTML：

console.log($divs.html())

Answer 2

是的，打印[object Object]但它有一个expando-toggly按钮。所以，循环遍历其中的元素并显示它。

console.log($divs.html())

Answer 3

使用text（）方法获取标签信息

function getData(){
    var $divs = $('.div1').text();   

    var p_tags = $('.div1 p').text();
    var ul_tags = $('.div1 ul').text();
}

如果你想要完整的HTMl，那么使用html（）方法。