插入HTML元素或替换其内容（如果存在）

Question

我有以下HTML：

<ul>
    <li>One</li>
    <!-- here may or may not be: <li></li> -->
</ul>

使用jQuery编写以下内容的最简洁/最流行的方法是什么：

var $firstLi = $('li:first-child');
if (!$firstLi.next().length) {
    $firstLi.after('<li>Two</li>');
} else {
    $firstLi.next().html('Two');
}

var $firstLi = $('li:first-child');
if (!$firstLi.next().length) {
	$firstLi.after('<li>Two</li>');
} else {
	$firstLi.next().html('Two');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
    <li>One</li>
    <li></li>
</ul>

Answer 1

如果您想要简明方式

var $firstLi = $('ul li:eq(1)'); // Index is zero based
$firstLi.length ? $firstLi.text('Two') : $('ul').append('<li>Two</li>');

如果您想要可读代码，那么您已经拥有了代码。

Answer 2

我发现了一个简单的单行：

$('li:first-child').next().remove().end().after('<li>Two</li>');