使用jQuery获取div内容的值

Question

我有以下HTML代码，想要获取div的值为"Other"。请问如何使用jQuery实现？

```

```

 <div class="readonly_label" id="field-function_purpose">
        Other
 </div>

- redcoder

Answer 1

使用.text()方法来提取div元素的内容。

var text = $('#field-function_purpose').text()

- Arun P Johny

---

你能说出为什么在上述情况下 .val 无法工作吗？谢谢！ - Unbreakable

@Unbreakable .val 是针对输入元素的。 - Arun P Johny

Answer 2

您的division看起来像这样：

<div class="readonly_label" id="field-function_purpose">Other</div>

使用jQuery可以轻松获取内部内容：

使用`.html()`：获取匹配元素集合中第一个元素的HTML内容或者设置每个匹配元素的HTML内容。

var text = $('#field-function_purpose').html(); 

了解更多有关jquery .html()的信息

或者

使用.text()：获取匹配元素集合中每个元素及其后代的组合文本内容，或设置匹配元素的文本内容。

var text = $('#field-function_purpose').text();

阅读有关jQuery .text()的更多信息

。

- Ishan Jain

Answer 3

你可以使用jquery中的.text()获取div内容

var divContent = $('#field-function_purpose').text();
console.log(divContent);

小提琴

- Roopendra

Answer 4

您可以使用jQuery的text()方法来获取元素中包含的所有文本内容。text()方法还会返回子元素的文本内容。 HTML代码：

<div id="box">
  <p>Lorem ipsum elit sit ut, consectetur adipiscing dolor.</p> 
</div>

JQuery 代码：

  $(document).ready(function(){
    $("button").click(function(){
      var divContent = $('#box').text();
      alert(divContent);
    });
  });

您可以在这里看到一个例子：如何使用jQuery获取元素的文本内容。

- thomas

Answer 5

$('#field-function_purpose') 会获取到 ID 为 field-function_purpose 的元素，也就是你的 div 元素。而 text() 则会返回该 div 元素的内容。

var x = $('#field-function_purpose').text();

- Barun

Answer 6

使用jQuery尝试获取div内容的值。

    $(".showplaintext").click(function(){
        alert($(".plain").text());
    });
    
    // Show text content of formatted paragraph
    $(".showformattedtext").click(function(){
        alert($(".formatted").text());
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="plain">Exploring the zoo, we saw every kangaroo jump and quite a few carried babies. </p>
    <p class="formatted">Exploring the zoo<strong>, we saw every kangaroo</strong> jump <em><sup> and quite a </sup></em>few carried <a href="#"> babies</a>.</p>
    <button type="button" class="showplaintext">Get Plain Text</button>
    <button type="button" class="showformattedtext">Get Formatted Text</button>

引用自@使用jQuery获取元素内文本

- Ketan Savaliya