7

最初に、これを DOM に持っています:

<li>
  <span>A</span>
</li>

私がこれを行うとき：

$("li").append("<span>B</span>");


DOM を調べると、次のようになります。

<li>
  <span>A</span>
  <span>B</span>
</li>


しかし、私はしたいです

<li>
   <span>A</span><span>B</span>
</li>


2 つの要素の間に空白が表示されないようにするために、同じ行にスパンを表示する必要があります。

javascript innerHTML を使用すると、問題は jQuery が追加および html 関数に使用するのと同じです。

ここにjsFiddleがあります

ご協力ありがとうございました

4

2 に答える 2

11

の代わりに使用するだけで、問題を解決、または少なくとも回避できます。after()append()

$("li span").last().after("<span>C</span>");


$("li span").last().after("<span>C</span>");
$('#generatedHTML').text($('li').html());
#generatedHTML {
  white-space: pre-wrap;
  font-family: mono;
  padding: 0.5em;
  margin: 0;
  background-color: #eee;
}
#generatedHTML::before {
  content: "Created HTML: ";
  color: #999;
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <span>A</span>
  </li>
</ul>
<div id="generatedHTML"></div>

また、HTML を修正したことに注意してください。 anliは、 orの直接の子である場合にのみ有効です (他の要素内に含めることはできません)。ulol

また、やや複雑な代替手段を使用することもできます。

$("li").append("<span>B</span>").contents().filter(function(){
    return this.nodeType === 3;
}).remove();


$("li").append("<span>B</span>").contents().filter(function(){
    return this.nodeType === 3;
}).remove();
$('#generatedHTML').text($('li').html());
#generatedHTML {
  white-space: pre-wrap;
  font-family: mono;
  padding: 0.5em;
  margin: 0;
  background-color: #eee;
}
#generatedHTML::before {
  content: "Created HTML: ";
  color: #999;
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <span>A</span>
  </li>
</ul>
<div id="generatedHTML"></div>

しばらく経ちましたが、上記の単純な JavaScript バージョンも追加する価値があると思いました。

let htmlToAppend = '<span>B</span>',
  span = document.querySelector('li span');

span.insertAdjacentHTML(
  'afterend', htmlToAppend
);
document.querySelector('#generatedHTML').textContent = span.parentNode.innerHTML;


let htmlToAppend = '<span>B</span>',
  span = document.querySelector('li span');

span.insertAdjacentHTML(
  'afterend', htmlToAppend
);
document.querySelector('#generatedHTML').textContent = span.parentNode.innerHTML;
#generatedHTML {
  white-space: pre-wrap;
  font-family: mono;
  padding: 0.5em;
  margin: 0;
  background-color: #eee;
}

#generatedHTML::before {
  content: "Created HTML: ";
  color: #999;
  display: block;
}
<ul>
  <li>
    <span>A</span>
  </li>
</ul>
<div id="generatedHTML"></div>

参考文献:

于 2013-03-20T09:17:47.250 に答える
1

したがって、答えは、ソースコードに表示されているケースはないということです。1行または数行のマークアップであり、どちらもブラウザによって同等のDOMとして実装されています。空白の問題は、間違ったスタイルが原因である可能性があります。ですので、まずはチェックすることをお勧めします。

于 2013-03-20T02:09:09.760 に答える