How to display captured text as H2 using JQuery

Question

I'm trying to learn Jquery and here is the problem. I go to know how to grab a text from an anchor element using Jquery

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

But the issue is I do not know how to display this captured text as an H2 tag on the page- using Jquery..

maybe you'll find your answer here http://stackoverflow.com/questions/1219860/javascript-jquery-html-encoding — Sevag Akelian, Jul 05 '13 at 13:21

score 1 · Answer 1 · answered Jul 05 '13 at 13:21

once you have the text, you can assign it to an element ...

<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>

.. or more simply ...

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

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

konkked · Answer 2 · 2013-07-05T13:42:48.680

Well it if you have something like this in your HTML

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

you can use the following if you want to add to the current elements in the div

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

or you can use this to completely replace the content

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

But depends on exactly what you want to do. I mean basically, you just have to remember that the string that goes inside of the $(str) expression is a CSS selector, so if you have multiple matches will cause it to get repeated in multiple places, so if your html is like this

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

And you use the class CSS selector then the action will be repeated in multiple places

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

This will cause the action to get repeated in both

I also like to make a function to wrap my HTML Tag elements in

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

from there you could make a function that takes a tag, target data and a css selector and does the work for you

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);
}

And then you just use the function in your code

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);

score 0 · Answer 3 · answered Jul 05 '13 at 13:21

0

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

answered Jul 05 '13 at 13:21

Mihai Matei

24,166
5
32
50

score 0 · Answer 4 · answered Jul 05 '13 at 13:21

0

Whatever container you want to append to, say a div with ID of container:

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

answered Jul 05 '13 at 13:21

tymeJV

103,943
14
161
157

score 0 · Answer 5 · answered Jul 05 '13 at 13:22

Let's say that you have HTML part like:

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

Then to put the text inside h2 after user clicks my_anchor:

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

How to display captured text as H2 using JQuery

5 Answers5