Как вставить разрыв строки после программного добавления текста в элемент HTML в Jquery? - PullRequest
Новая
       23

Как вставить разрыв строки после программного добавления текста в элемент HTML в Jquery?

0 голосов
/ 04 мая 2019 

var insertTxt = $("aside p:last-of-type").text().split(" ");
insertTxt.splice(20, 0, 'Chevy Dealers Association ');
$("aside p:last-of-type").text(insertTxt);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<aside>
  <h2>Client Testimonials</h2>

  <p>Throughout the years we have worked with Vecta Corporation, we have always been amazed at the level of dedication and professionalism that they have provided us and our WGDC products. It is this commitment that has increased both our income and exposure
    exponentially.</p>

  <p>Iona Ford<br> President
  </p>
</aside>

Я пытаюсь программно добавить в строку «Ассоциация дилеров Chevy» после слова «Президент», заключенного в тег html ap.У меня возникли проблемы с добавлением разрыва строки, чтобы Иона Форд, президент и Ассоциация дилеров Chevy были на своей линии.Поэтому мне нужно создать три отдельные строки с этим одним тегом p html в Jquery.Результаты, которые я получаю, отображают все это в одной строке с запятыми, где я хочу разрывы строк.

Ответы [ 3 ]

1 голос
/ 04 мая 2019

Результаты, которые я получаю, отображают все это в одной строке с запятыми, где я хочу разрывы строк

Причина запятых заключается в том, что после разделения текста на массивиз строк, вы не объединили их обратно в большую строку, поэтому выводом является представление массива, в котором в качестве разделителя используется запятая.

Если вы хотите минимально изменить свой код и не изменять исходный html, вы можете попробовать это. 

$("aside p:last-of-type").find("br").remove(); // remove old <br> tags as they interfere with text manipulation
var insertTxt = $("aside p:last-of-type").text().split(" ");
insertTxt.push("<br>Chevy Dealers Association"); // add new info, with <br> attached
insertTxt.splice(2, 0, "<br>"); // add <br> after "Ford"
$("aside p:last-of-type").html(insertTxt.join(" ")); // use join to add space back

Тем не менее, я бы порекомендовал вам изменить html.Например, вы можете включить тег для каждой строки и использовать идентификатор, чтобы указать, что означает эта строка (например, <span id="boss">Iona Ford</span>).Это может сделать жизнь намного проще для будущих изменений в тексте.

0 голосов
/ 04 мая 2019 

var insertTxt = "<p>Iona Ford <br/> President <br/> Chevy Dealers Association .</p>"

$("aside p:last-of-type").append(insertTxt);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<aside>
			<h2>Client Testimonials</h2>
			
			<p>Throughout the years we have worked with Vecta Corporation, we have always been amazed at the level of dedication and professionalism that they have provided us and our WGDC products. It is this commitment that has increased both our income and exposure exponentially.</p>
			
</aside>
0 голосов
/ 04 мая 2019

Я думаю, вы ищете это.

var insertTxt = " <span class='name-span'>Chevy Dealers Association.</span>"

$("aside p:last-of-type").append(insertTxt);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<aside>
			<h2>Client Testimonials</h2>
			
			<p>Throughout the years we have worked with Vecta Corporation, we have always been amazed at the level of dedication and professionalism that they have provided us and our WGDC products. It is this commitment that has increased both our income and exposure exponentially.</p>
			<p>Iona Ford <br/> President <br/></p>
</aside>

Если у вас больше сомнений по поводу добавления HTML с помощью jQuery, посетите Здесь .

...