javascript - に挿入エレメント

Question

私は好きになりました。

<p>Variable Text</p>

そして、そうであってほしいです。

<p>Variable <span>Text</span></p>

これはjavascript関数で可能ですか? / または jQuery。

そうそう、p 要素には ID があり、p 要素内のテキストは可変ですが、常に 2 つの単語で構成されています。JavaScript関数でテキストの最後の単語の周りにスパンが必要です。

Answer 1

これを試して

var txt = "Hello bye";
var dataArr = txt.split(' ');

var paragraph = document.getElementById("pid");
paragraph.innerHTML = dataArr[0]+ " <span>"+dataArr[1]+"</span>";

ここにデモがあります

Answer 2

それは可能です（以下では、あなたが言ったようにIDがあると仮定しpています）、それはあなたができる最も単純な形式です：

var paragraph = document.getElementById("pId");
paragraph.innerHTML = "Hello <span>World</span>";

または、jQuery を使用する場合:

$("#pId").html("Hello <span>World</span>");

または（コメントで言ったように、既存のコンテンツを保持したいが、最後の単語を aspanでラップしたい場合は、次のことができます：

var newHTML = $("#pId").html().replace(" ", " <span>");
$("#pId").html(newHTML).append("</span>");

デモ

Answer 3

jQuery の方が簡単で、個人的には JavaScript だけよりも使いやすいと思います。

jQuery:

$("#paragraphID").append("<span>World</span>");

HTML:

<p id="paragraphID">Hello</p>

Answer 4

$("document").ready(function(){
  $("p").append("<span>world</span>");
});

Answer 5

JQueryの追加で

$("#paragraphId").append('<span>Text in span</span>');