Javascript动态编辑HTML

javascript edit html on the fly

本文关键字：HTML 编辑 动态 Javascript      更新时间：2023-09-26

我正在使用一个web应用程序(Sharepoint)，我需要做一些内联调整。该应用程序本身非常强大，但在某些方面存在限制。例如，在本例中，我试图为照片创建一个onlick事件。由于条件的限制，我无法完成这项工作。(如果你知道sharepoint，你知道wiki页面的限制)所以，我的目标是在页面上实际实现javascript(支持)，它将定位图像，并插入onclick事件。

我遇到的问题是，我似乎甚至不能得到一个简单的搜索和替代工作。大多数示例似乎是指文本节点，但我不熟悉该术语是什么。

我正在寻找一些指导。谢谢!

(这不是答案，但评论太短)我想解决几个问题。这就是其中之一。我在一个网站上有一个文档库，它嵌入在另一个网站中。当用户单击文档时，它会在文档库的非常小的窗口中呈现该文档。我想完成的一件事是在url中添加一个"target=_blank"，以便在一个全新的浏览器窗口中打开。不幸的是，这个文档列表是动态的，因此必须动态完成。第二个挑战是图像，如前所述。在这种情况下，有一个很小的选择器箭头，它将数据刷新到另一个web部件。虽然这是有效的，但点击图像会方便得多。同样，内容是动态的，在这种情况下，我需要从箭头读取URL，并动态更改图像，使其可点击。这可能超出了我的能力范围，因为我不擅长web开发实践。我更喜欢编译器。,)我没有任何代码示例提供，因为我所尝试的一切只是概念的证明。我将再看一下这个问题，并提出一些建议。谢谢。

不知道为什么要用JavaScript编辑HTML来添加事件处理程序。这通常不是您想要与DOM交互以添加事件处理程序的方式。

最简单的方法是使用jQuery并使用它查找具有适当选择器的元素并添加事件处理程序。我以前在SharePoint项目中使用过这个，没有任何问题。

可以从行中开始(尽管选择器会导致DOM中所有img标签的单击事件处理程序)。

$ (img) .click(函数(){/代码在这里当点击/});

如果您希望避免使用jQuery，可以使用下面的代码:

function search(scope, tagName, attr, query) {
    tagName = scope.getElementsByTagName(tagName);
    var size = tagName.length;
    var results = new Array();
    for (var i = 0; i < size; i++) {
        if (tagName[i].getAttribute(attr) == query)
            results.push(tagName[i]);
    }
    return results;
};

上面的函数执行您传递给它的任何范围的跨浏览器查询。因此，如果我们希望搜索文档中所有以'Clickable'作为其类的图像，我们可以这样做:

var images = search(document, 'img', 'className', 'Clickable');
for (var i = 0; i < images.length; i++) {
    images[i].onclick = onClickFunction; // onClickFunction being whatever you write.
}
相关文章：