Create DOM element with jQuery

Question

I have a function

       $(document).ready(function () {
        $("#btnhighlight").click(function () {
            var htext = $("#txthighlighttext").val();
            $("#lstCodelist option").each(function () {
                var sp = $(this).text(); 
                var sp1 = sp.split(' ');
                $.each(sp1, function (i, l) {
                    if (l == htext) {
                        var boldText = "<div style=\"background-color: yellow; display: inline; font-weight: bold;\">" + htext + "</div>";
                        $(document).append(boldText);
                    }
                });
            });
        });
    });

I updated the code but no luck. Here in this code I need to create a l has a DOM element to apply color yellow to that.

please can any body help me out how to create a dom element.

Thanks

sp1 is the just var, I am just spliting the value of sp. I am getting some string ex: "I love jquery" sp1 is I, love , jquery. — user957178
– user957178, Commented Sep 28, 2011 at 17:08
You're trying to highlight some words, but simple text cannot have CSS styles. You'll have to put a <span> around each word, and for that, this jQuery forum post might help. — sdleihssirhc
– sdleihssirhc, Commented Sep 28, 2011 at 17:14

bfavaretto · Accepted Answer · 2011-09-28 18:41:27Z

1

I didn't understand where does l is in your current code. Anyway, you can create a DOM element with jQuery like this: var myel = $('<div class="someclass"></div>'). Then you can append myel to wherever you want in the DOM using function like .appendTo(), .after(), etc.

EDIT

You seem to be trying to highlight some words inside an <option> element. I have doubts if that is going to work on all browsers, since form elements are a little tricky when it comes to CSS. You can try something like this (untested):

$(document).ready(function () {
    $("#btnhighlight").click(function () {
        var htext = $("#txthighlighttext").val();
        $("#lstCodelist option").each(function () {
            var sp = $(this).text();
                var re = new RegExp("\\b" + htext + "\\b")
                sp = sp.replace(re, '<span class="highlighted">$1</span>', "gi");
                $(this).html(sp);
        });
    });
});

You also need some CSS on your page, defining the style for .highlighted

UPDATE AFTER CHAT

I got something working using a <p> instead of <option>, to rule out the problem of form element styling:

http://jsfiddle.net/GTydh/3/

The updated js (in case fiddle is deleted):

$(document).ready(function () {
    $("#btnhighlight").click(function () {
        var htext = $("#txthighlighttext").val();
        //$("#lstCodelist option").each(function () {
        $("p").each(function () {
            var sp = $(this).text();
            var re = new RegExp("\\b(" + htext + ")\\b")
            var sOpen = "<span class='highlight'>";
            var sClose = "</span>";
            var newhtml = sp.replace(re, sOpen + "$1" + sClose, "gi");
            $(this).html(newhtml);
        });
    });
});

edited Sep 28, 2011 at 18:41

answered Sep 28, 2011 at 17:09

bfavaretto

72k18 gold badges118 silver badges162 bronze badges

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

6 Comments

user957178 Over a year ago

Thanks bfavaretto, here in the each loop i get l $.each(sp1, function (i, l) { if (l == htext) { $(l).css('color', 'yellow'); } });

bfavaretto Over a year ago

Yes, but them l is a word from the sp array, right? You have to wrap that word in a span or something so you can apply the css.

user957178 Over a year ago

Please can you update my code bfavaretto. I am little confuse here.

bfavaretto Over a year ago

Updated my answer with a different solution.

bfavaretto Over a year ago

There was an escape problem on my regex, can you try again. Also, do you understand how my solution works? Please try to understand the method I suggest, that is basically a string replacement.

|

Clive · Accepted Answer · 2011-09-28 17:10:04Z

0

Something like this?

$(document).append($('<div />').css('color', 'yellow'));

That will append a new div with a colour of yellow to the document. If you need to add it to a specific element just use $('#myselector') instead of $(document)

answered Sep 28, 2011 at 17:10

Clive

36.9k8 gold badges89 silver badges113 bronze badges

Comments

Elkas · Accepted Answer · 2011-10-01 17:46:10Z

0

Its quite simple

var newEl = $('<div THE_ATTRIBUTES_YOU_WANT></div>');
$('THE_ELEMENT_YOU_WANT_TO_APPEND_OR_ADD').append(newEl);

edited Oct 1, 2011 at 17:46

answered Sep 28, 2011 at 17:12

Elkas

59712 silver badges27 bronze badges

3 Comments

Elkas Over a year ago

Or just add the attributes like the post before mine =)

user957178 Over a year ago

I can append individual work also right? like in my code I need to append l.

Elkas Over a year ago

You can append or prepend alot of elements if you want. My english is a little bad to try to explain it =) I'll leave you the links that helped me =) api.jquery.com/prepend api.jquery.com/append They'r documentation is awesome.

Collectives™ on Stack Overflow

Create DOM element with jQuery

3 Answers 3

6 Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related