在div或窗口大小上更改段落内容

Question

I'm trying to edit the content of a paragraph based on window / div size but didn't have success yet.. Here is what I've tried :

$(document).ready(function(){
    function check(){
        var w = $(window).width();
        var ot = "elegant@elegant.com<br>commercial@elegant.com";
        var nt = "e@elegant.com<br>c@elegant.com";  
        w < 768 ? $(".mail").text.parseHTML(nt) : $(".mail").text.parseHTML(ot);
    }
    check();
    $(window).resize(check);
    });

anyone got any clues on how to proceed ?

Answer 1

I would do something like:

<p class="ot">elegant@elegant.com<br>commercial@elegant.com</p>
<p class="nt">e@elegant.com<br>c@elegant.com</p>

<style>
    p.ot { display: block; }
    p.nt { display: none; }
    @media screen and (max-width: 768px) {
        p.ot { display: none; }
        p.nt { display: block; }
    }
</style>

http://jsfiddle.net/5eg499qm/

Answer 2

It seems that you're trying to insert parsed HTML into an element.

The strings you want to parse are not yet in the DOM -- they are just javascript variables -- so you'll want the calls to parseHTML() to be performed on those strings rather than text from a DOM element.

Also, since you are inserting HTML, use the html() method rather than text() .

The correct syntax is:

$(".mail").html($.parseHTML(nt));
$(".mail").html($.parseHTML(ot));

References: parseHTML() , html()

WORKING EXAMPLE

---

That being said, I would use a CSS option as suggested by Rich Remer. CSS is generally used for layout while javascript is generally used for interaction. Read more .