如何编写一个替换标签内文本的js？

Question

如何编写一个替换标签内文本的js？ 我有一个使用此javascript的下拉移动菜单：

toggle.js

$(function ()
{
var $window = $(window),
    $nav = $('nav'),
    $button = $('button');

$button.on('click', function ()
{
    $nav.slideToggle();
});

$window.on('resize', function ()
{
    if ($window.width() > 320)
    {
        $nav.show();
    }
});
});

Here is the section of HTML
<button>Select Destinations
<img src="images/down-arrow.png" width="20" height="20"/>
</button>
<nav id="menu">     
<a href="#">Philadelphia</a>
<a href="#">United States of America</a>
<a href="#">Philippines</a>
<a href="#">Long Destinations Names</a>
<a href="#">Some Destination</a>
<a href="#">Australia</a>
</nav>

我需要用下拉菜单中选择的任何按钮替换“选择目标”。 恩。 如果我选择“洛杉矶”，则应将“选择目的地”替换为“洛杉矶”。 我尝试了下拉列表，但它看起来与其他设备不同。

谁能分享一些信息？ 提前致谢。

Answer 1

在JQuery中，可以通过以下方式访问标记内的文本：

$(obj).text();

要么

$(obj).html();

调用它们时不带任何参数，它将检索当前值，传入您自己的字符串，并替换其中的内容。

Answer 2

如果您使用的是jquery，则可以通过以下方式替换标记中的元素：

$('.myselector').html('stuff to put inside my selector');

Answer 3

您可以执行以下操作：

//Javascript
$("nav#menu a").click(function()
{
    $("span").text($(this).text());
});

// HTML
Here is the section of HTML
<button><span>Select Destinations</span>
<img src="images/down-arrow.png" width="20" height="20"/>
</button>
<nav id="menu">     
<a href="#">Philadelphia</a>
<a href="#">United States of America</a>
<a href="#">Philippines</a>
<a href="#">Long Destinations Names</a>
<a href="#">Some Destination</a>
<a href="#">Australia</a>
</nav>

Answer 4

无需触摸任何HTML

img_arrow = '<img src="images/down-arrow.png" width="20" height="20"/>';

$('#menu a').click(function(e){

    $('button').html($(this).html() + img_arrow);

    e.preventDefault();
});

见jsFiddle