HTML as output JQuery

Question

In the last Question I asked, about alerting Variables out.

Can be found here.

I fixed it and it works now.

With the knowledge I gained from the last answers I wanted to do an output of an <a> </a> with Variables in it.

But am not able to do this.

I did try various types of escaping which came to my mind. None Helped.

So I´m going to ask you guys again: How can I fix this, to print out my Variables correctly?

$('<a>'
ID von '' + counter + ''
XPosition '' + containerX + '', YPosition '' + ContainerY '</a>').appendTo($('#textuelledarstellung'));

Context:

var counter = 0;
$('#divfuerimage').on('click', function (evt) {
    counter = counter + 1;
    var containerX = evt.pageX - $(this).offset().left,
    containerY = evt.pageY - $(this).offset().top;
    alert('ID von' + counter + ' XPosition' + containerX + ''
                               , YPosition' + containerY); //this is working

    $('<a>'
    ID von '' + counter + ''
    XPosition '' + containerX + '', YPosition '' + ContainerY '</a>').appendTo($('#textuelledarstellung'));
            //this not

Please format and rephrase your question.

Satpal
– Satpal

2014-09-01 11:56:17 +00:00
Commented Sep 1, 2014 at 11:56 — Satpal
– Satpal, Commented Sep 1, 2014 at 11:56

Satpal · Accepted Answer · 2014-09-01 11:52:14Z

2

Create element using jQuery and use its method to set your data.

Use

var htmlText = 'ID von' + counter + ' XPosition' + containerX + ', YPosition' + containerY;
$('<a></a>')
    .prop('id', YourId)
    .prop('href', Url)
    .html(htmlText)
    .appendTo($('#textuelledarstellung'));

answered Sep 1, 2014 at 11:52

Satpal

134k13 gold badges168 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nzall Over a year ago

This is the proper way to handle inserting HTML Using jQuery. If you use string concatenation, you'll likely end up having a monster of a string that is hard to maintain and difficult to add another property to.. If you use the method above, it's trivial to add another property.

Sams · Accepted Answer · 2014-09-01 12:06:08Z

0

Try this:

var $link = $("<a>", {
   "id" : "elementID",                 // <a id="elementID"></a>
   "class" : "elementClass",           // <a class="elementClass"></a>
   "href" : "http:...",                // <a href="http:..."></a>
   "html" : "<span>Text</span>",       // <a><span>text</span></a>
   "text" : "Hello World" + " !",      // <a>Hello world</a> - this will replace previus HTML  
});

$("body").append($link);

This will output:

<a id="elementID" class="elementClass" href="http:...">Hello World !</a>

answered Sep 1, 2014 at 12:06

Sams

6911 gold badge8 silver badges15 bronze badges

2 Comments

CodeFanatic Over a year ago

this is totally not what i want

Sams Over a year ago

this is just different way to create a HREF with any properties :)

Collectives™ on Stack Overflow

HTML as output JQuery

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related