Question

我正在尝试学习Jquery，这就是问题所在。我将了解如何使用Jquery

从锚元素中获取文本

alert($(this).text());

但问题是我不知道如何使用Jquery在页面上将此捕获的文本显示为H2标记..

Answer 1

获得文本后，可以将其分配给元素...

<script>
$(function(){
    // (this) won't work here, needs to be an element, but you get the idea
    var str = $(this).text();
    $('#blah').html('<h2>'+str+'</h2>');
});
</script>

<div id="blah"></div>

..或更简单......

<script>
$(function(){
    $('#blah').html( $(this).text() );
});
</script>

<h2 id="blah"></h2>

Answer 2

好吧，如果你的HTML中有这样的东西

<div id="newh2placeholder"></div>

如果要添加div中的当前元素，可以使用以下内容

var newHeader = $("<h2>"+$(this).text()+"</h2>");
$("#newh2placeholder").append(newHeader);

或者您可以使用它来完全替换内容

$("#newh2placeholder").html(newHeader);

但完全取决于你想做什么。我的意思是基本上，你只需要记住$(str)表达式内部的字符串是一个CSS选择器，所以如果你有多个匹配将导致它在多个地方重复，所以如果你的html就像此

<div class='someClass'></div>
...
<div class='someClass'></div>

然后你使用类CSS选择器，然后动作将在多个地方重复

//to append
$(".someClass").append(newHeader);
//or to replace inner html
$(".someClass").html(newHeader);

这将导致动作在

中重复出现

我还想创建一个函数来将我的HTML Tag元素包装在

中

function wrapInTag(tag,target){
    return $("<"+tag">"+target+"</"+tag+">");
}

从那里你可以创建一个带有标签，目标数据和css选择器的功能，并为你完成工作

function appendToSelection(selector,tag,data){
    toAppend = wrapInTag(tag,data);
    return $(selector).append(toAppend);
}

function setInnerHtmlForSelection(selector,tag,data){
    newHtml = wrapInTag(tag,data);
    return $(selector).html(newHtml);
}

然后你只需在代码中使用该功能

data = $(this).text();
tag = "h2";
selection = "#newh2placeholder";
//if you want to append
result = appendToSelection(selection,tag,data);
//if you want to replace the html
result = setInnerHtmlForSelection(selection,tag,data);

Answer 3

$('h2').text(
  $('#my-anchor-element').text();
).appendTo('#parent-element');

Answer 4

无论您要添加哪个容器，请说出ID为container的div：

$("#container").html("<h2>" + $(this).text() +"</h2>");

Answer 5

假设您有HTML部分：

<div>
     <h2 id="my_h2"></h2>
     <a href="#" id="my_anchor">Some text to grab</a>
</div>

然后在用户点击h2后将文字放入my_anchor：

$('#my_anchor').click(function(){
     $('#my_h2').text($(this).text());
});

如何使用JQuery将捕获的文本显示为H2

5 个答案: