Question

<div id="content">
    <h1>Redigeringsbara stycken</h1>
    <p class="editable">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</div>

// JAVASCRIPT

window.onload = function  () {
    /*
    var pElements = document.getElementsByTagName('*');
    for (var i=0; i < pElements.length; i++) {
        if(pElements[i].className == 'editable')
            inPlaceEditor(pElements[i]);
    };
    */
   document.onclick = catchIt;
};

function inPlaceEditor (editableElement) {

}

var editing = false;

if (document.getElementById && document.createElement)
{
   var butt = document.createElement('BUTTON');
    var buttext = document.createTextNode('Ready!');
    butt.appendChild(buttext);
    butt.onclick = saveEdit;
}

function catchIt(e) {
    if (editing) {
          alert("U're still editing!!");
        return;
    }
    if (!document.getElementById || !document.createElement) return;
    if (!e) var obj = window.event.srcElement;
    else var obj = e.target;
    while (obj.nodeType != 1) {
        obj = obj.parentNode;
        alert(obj.nodeType);
    }
    if (obj.tagName == 'textarea' || obj.tagName == 'a') return;
    while (obj.nodeName != 'P' && obj.nodeName != 'HTML')
    {
        obj = obj.parentNode;
        alert(obj.nodeName);
    }
    if (obj.nodeName == 'HTML') {
        // alert ("this is HTML");
        return;
    }
    //other way to grab the text instead of innerHTML-method????
    var targetInnerHtml = obj.innerHTML;
    var textArea= document.createElement('textarea');
    var parentnode = obj.parentNode;
    parentnode.insertBefore(textArea, obj);
    parentnode.insertBefore("<br />", obj);
    parentnode.insertBefore(butt, obj);
    parentnode.removeChild(obj);
    textArea.value = targetInnerHtml ;
    textArea.focus();
    editing = true;
}

function saveEdit() {
    var area = document.getElementsByTagName('textarea')[0];
    var paragraph = document.createElement('P');
    var parentnode = area.parentNode;
    paragraph.innerHTML = area.value;
    parentnode.insertBefore(paragraph, area);
    parentnode.removeChild(area);
    parentnode.removeChild(document.getElementsByTagName('button')[0]);
    editing = false;
}

HELLO GULRS和BOYS！我想知道是否：1-有另一种方法来获取html文本而不是使用innerHtml方法？对于那些在Jquery工作的人来说，在Jquery中实现这段代码会更容易吗？为了避免线路，可能更快？格拉西亚斯！ :)

Answer 1

如果可以使用jQuery，可以使它变得简单。您使用的活动是什么？

您可以使用jQuery html()方法来获取/设置innerHTML。

获取innerHTML

$(obj).html()

设置它：

$(textArea).value(targetInnerHtml)

Answer 2

看起来你只想要文字，所以你可以写：

var targetText = obj.textContent || obj.innerText;

更强大的版本是：

if (typeof obj.textContent == 'string') {
    targetText = obj.textContent;
} else if (typeof obj.innerText == 'string') {
    targetText = obj.innerText;
}

可以将其转换为函数，这样您就可以调用它而不必每次都写上面的内容。

其他评论：

function catchIt(e) {
editing = false;

  if (editing) {

编辑将如何成为现实？

  parentnode.insertBefore(butt, obj);

butt 未在任何地方声明或初始化。

在js中使用除innerHTML之外的其他方法？

2 个答案: