Question

我想在html标记之外使用'newline'插入新的html。但是当我这样做时，它不起作用：

$('\n<span>Banana</span>').insertAfter(word);

但是当我将\n放在span标签内时，它正在工作：

$('<span>\nBanana</span>').insertAfter(word);

我希望在插入新范围时将\n放在span标记之外。请帮我。谢谢。 ^^

var word = $('pre span.active');

$('#a').on('click', function () {
  if($(word).next('span').length){
    // below is not working
    $('\n<span>Banana</span>').insertAfter(word);
    
    $(word).next().addClass('active');
    $(word).removeClass('active');
  }
})

// but when I use \n inside span tag is working
//$('<span>\nBanana</span>').insertAfter(word);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<pre>
<span>Apple</span> <span class="active">Papaya</span> <span>Avocado</span>
</pre>
<button id="a">Next</button>

修改根据Dinesh的回答，我在span标记内使用display:block：$('\n<span style="display:block;">Banana</span>').insertAfter(word);并且它正在运行。这是一个好方法吗？或者我们有另一个不使用css的解决方案？

Answer 1

使用<br>代码\n

var word = $('span');
$('\n<span>Banana</span>').insertAfter(word);

span {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<pre><span>Apple</span></pre>

更新：OP想要没有任何标签。使用css

制作span标记display:block

jQuery在html标记之外插入新行

1 个答案: