JSFiddle - React, Tailwind, and code Playground

by jan_harmsen

HTML

<h3>Result testcase 1 (well-formed xml):</h3>
<div id="result_case1"></div>

<h3>Result testcase 2 (invalid xml):</h3>
<div id="result_case2"></div>

<h3>Reported Errors:</h3>
<ul id="errors"></ul>

CSS

h3 {
    margin-top:1em;
    font-weight: bold;
}

ul#errors {
    min-height: 50px;
    margin-top: 1em;
    border: solid red 1px;  
}

ul li {
    list-style: disc inside;
}

JavaScript

jQuery(document).ready(function () {
    var xmldoc1, $result1, xmldoc2, $result2;
    
    // Testcase 1: parsing well-formed xml
    try {
        xmldoc1 = jQuery.parseXML('<p>A <b>well-formed</b> xml string</p>');
        $result1 = jQuery(xmldoc1);
        jQuery('#result_case1').append($result1.find('p').clone());
    }
    catch (e) {
        jQuery('#errors').append('<li>error parsing string 1: error.name=' + e.name + ' error.message=' + e.message +'</li>');
    }
    
    
    // Testcase 2: parsine invalid xml
    try {
        xmldoc2 = jQuery.parseXML('<p>NOT a <<b >well-formed< ></ b> xml string</p>');
        $result2 = jQuery(xmldoc2);
        jQuery('#result_case2').append($result2.find('p').clone());
    }
    catch (e) {
        jQuery('#errors').append('<li>error parsing string 2: error.name=' + e.name + ' error.message=' + e.message +'</li>');
    }
    
    
});