Question

我有一个带临时文本的div，一旦单击其他图像，我想显示不同的文本，为此，我在javascript调用上使用了.text，我可以替换文本，我的问题是我可以请勿创建空格或分段符。有人可以解释一下如何实现吗？

$("#memberTrigger").click(function() {
  $("#memberDescriptionResponsive").text('This is the Large Description I want to appear within that text area defined previously. After this dot I would like to have a break of paragraph and continue in a secondary one, right now is showing on the same line as continuity');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3 id="memberDescriptionResponsive">Some Information of the Team Member</h3>
<div id="memberTrigger"></div>

Answer 1

text用于：

获取匹配元素集合中每个元素的组合文本内容（包括它们的后代），或设置匹配元素的文本内容。 http://api.jquery.com/text/

您应该使用html

此方法使用浏览器的innerHTML属性。某些浏览器可能不会返回完全复制原始文档中的HTML源代码的HTML。例如，如果Internet Explorer仅包含字母数字字符http://api.jquery.com/html/
，则Internet Explorer有时会省略属性值周围的引号。

$("#memberDescriptionResponsive").html('<span style="background:red">This is the Large Description</span><br>I want to appear within that text area defined previously. After this dot I would like to have a break of paragraph and continue in a secondary one, right now is showing on the same line as continuity');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="memberDescriptionResponsive">hey</div>

Answer 2

text方法插入文本。只是文字。不是元素。如果需要元素，则需要使用其他元素。

首先，您需要将h3更改为其他内容。 HTML标题元素不允许包含段落。

然后，您可以使用empty清除现有内容，并使用append添加新元素。

var heading = $("<h3 />").text("This is the Large Description I want to appear within that text area defined previously.");
var paragraph = $("<p />").text("After this dot I would like to have a break of paragraph and continue in a secondary one, right now is showing on the same line as continuity");

$("#memberDescriptionResponsive").empty().append([heading, paragraph]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="memberDescriptionResponsive"><h3>Some Information of the Team Member</h3></div>

Answer 3

您可以在要添加中断的位置之间添加<br>。但是您必须使用text

而不是使用.html

$("#memberTrigger").click( function() {
$("#memberDescriptionResponsive").html('This is the Large Description<br> I want to appear within that text area defined previously.<br> After this dot I would like to have a break of paragraph and continue in a secondary one, <br>right now is showing on the same line as continuity')});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3 id="memberDescriptionResponsive">Some Information of the Team Member</h3>
<div id="memberTrigger">a</div>

javascript .text调用中的空格

3 个答案: