xiyueta().html() 属性方法

获取匹配元素集中第一个元素的HTML内容，或设置每个匹配元素的HTML内容

快速上手

xiyueta().html()属性方法，两种调用方式：
1、xiyueta("div").html(); //获得匹配元素块内容，出现多个时，只显示第一条，如果没有元素块则返回undefined
2、xiyueta("div").html("内容"); //设置匹配元素块内容

总结：xiyueta().html()用法与jQuery中jQuery().html()用法保持一致，.htmlwrap(); //htmlwrap为加上当前标签块
see https://api.jquery.com/html
尝试一下>>

代码
效果

<script src="https://www.xiyueta.com/js/xiyueta.min.js"></script>
<script>
var html = '<div><p>xiyuetaJS库</p></div>';
$.load(html);
$.log($("div").html());
// $.log($("div").parse(html).html()); //解析html后获得元素内容  简单快速方法
</script>

<p>xiyuetaJS库</p>

例子1：
从html转换为文本。（引用jQuery例子）
查看效果>>

代码

<script src="https://www.xiyueta.com/js/xiyueta.min.js"></script>
<script>
var html = [
    '<style>',
    '  p {',
    '    margin: 8px;',
    '    font-size: 20px;',
    '    color: blue;',
    '    cursor: pointer;',
    '  }',
    '  b {',
    '    text-decoration: underline;',
    '  }',
    '  button {',
    '    cursor: pointer;',
    '  }',
    '  </style> ',
    ' ',
    '<p>',
    '  <b>Click</b> to change the <span id="tag">html</span>',
    '</p>',
    '<p>',
    '  to a <span id="text">text</span> node.',
    '</p>',
    '<p>',
    '  This <button name="nada">button</button> does nothing.',
    '</p>'
].join("\n");
 

$.load(html)
document.write($.html())


$("p").each(function() {
    var htmlString = $(this).html();
    $(this).text(htmlString);
});


$.log($.html())
document.write($.html())

</script>

例子2：
向每个分区添加一些html。（引用jQuery例子）
查看效果>>

代码

<script src="https://www.xiyueta.com/js/xiyueta.min.js"></script>
<script> 
var html = [
    '  <style>',
    '  .red {',
    '    color: red;',
    '  }',
    '  </style> ',
    '<span>Hello</span>',
    '<div></div>',
    '<div></div>',
    '<div></div>'
].join("\n");

$.load(html)

$("div").html("Hello Again");

$.log($.html())
document.write($.html())

</script>

详细说明

详细演示jquery().html()的.html()属性方法与xiyueta().html()的.html()属性方法的效果。
通过给.html()传不同类型的值来测试.html()属性在jquery里和xiyueta里的效果是否一样。
传值类型有字符，数字，数组，对象，函数等。
查看效果>>

代码

 
<script src="https://www.xiyueta.com/js/xiyueta.min.js"></script>
<script src="https://www.xiyueta.com/js/jquery.js"></script>

    <ul>
        <li>xiyueta.com</li> 
    </ul>
    <script type="text/javascript">  
    var c ="";
    var id=0;//编号
    var fun=function(n){
        if(n==undefined)n=1;
        return n;
    }    
    var funtrue=function(){
        return true;
    }    
    var funfalse=function(){
        return false;
    }
    var funstr=function(){
        return "str";
    }
    var funnumb=function(){
        return 123;
    }
    var funarray=function(){
        return [1,2,"a",false,true];
    }
    var funobj=function(){
        return {"a":"11","bb":"22","ccc":"333"};
    }

    xiyueta.load("<ul><li>xiyueta.com</li></ul>")

    jQueryAndxiyuetaDebug('jQuery("li:eq(0)").html()');
    jQueryAndxiyuetaDebug('jQuery("li:eq(0)").html(1).html()');
    jQueryAndxiyuetaDebug('jQuery("li:eq(0)").html(123).html()');
    jQueryAndxiyuetaDebug('jQuery("li:eq(0)").html(313801120).html()');
    jQueryAndxiyuetaDebug('jQuery("li:eq(0)").html(null).html()');
    jQueryAndxiyuetaDebug('jQuery("li:eq(0)").html(undefined).html()');
    jQueryAndxiyuetaDebug('jQuery("li:eq(0)").html(fun()).html()');
    jQueryAndxiyuetaDebug('jQuery("li:eq(0)").html("a").html()');
    jQueryAndxiyuetaDebug('jQuery("li:eq(0)").html(false).html()');
    jQueryAndxiyuetaDebug('jQuery("li:eq(0)").html(true).html()');
    jQueryAndxiyuetaDebug('jQuery("li:eq(0)").html(1.1).html()');
    jQueryAndxiyuetaDebug('jQuery("li:eq(0)").html([1,2,3,4,5,6]).html()');
    jQueryAndxiyuetaDebug('jQuery("li:eq(0)").html({"a":1,"b":2,"c":3}).html()');
    jQueryAndxiyuetaDebug('jQuery("li:eq(0)").html(NaN).html()');
    jQueryAndxiyuetaDebug('jQuery("li:eq(0)").html(Infinity ).html()');
    jQueryAndxiyuetaDebug('jQuery("li:eq(0)").html(function(){}).html()');


    jQueryAndxiyuetaDebug('jQuery("li:eq(0)").html(funtrue()).html()');
    jQueryAndxiyuetaDebug('jQuery("li:eq(0)").html(funfalse()).html()');
    jQueryAndxiyuetaDebug('jQuery("li:eq(0)").html(funstr()).html()');
    jQueryAndxiyuetaDebug('jQuery("li:eq(0)").html(funnumb()).html()');
    jQueryAndxiyuetaDebug('jQuery("li:eq(0)").html(funarray()).html()');
    jQueryAndxiyuetaDebug('jQuery("li:eq(0)").html(funobj()).html()');


    jQueryAndxiyuetaDebug('jQuery("li:eq(0)").html([]).html()');
    jQueryAndxiyuetaDebug('jQuery("li:eq(0)").html({}).html()');
    // jQueryAndxiyuetaDebug(' $("li:eq(0)").html( 100n ).html()';//在asp版不行
 

    function jQueryAndxiyuetaDebug(js) {
        var jsXiyueta=js.replace(/jQuery/g,"xiyueta")
        var s1=jsEv(js)
        var s2=jsEv(jsXiyueta)
        id++
        xiyueta.log(id,js,s1,jsXiyueta,s2,(s1==s2))
        console.log(id,js,s1,jsXiyueta,s2,(s1==s2))
    }
    function jsEv(js) {
        var s = eval(js);
        var deyu = "";
        if (typeof s == 'string') {
            s = s.replace(/\n/g, '\\n');
            deyu = "'" + s + "'";
        } else if (typeof s == "object") {
            deyu = "'" + s + "'";
        }else{
            deyu=s+""
        }
        if(deyu=="")deyu="''"; 
        return deyu; 
    } 

</script>