javascript - 将 Javascript 变量添加到 HTML 元素

Question

所以，我有一些代码应该做四件事:

• 从每个标题中删除“.mp4”扩展名
• 更改我的视频类别
• 在所有视频中使用相同的描述
• 在所有视频中使用相同的关键字

注意:所有这些都将在 YouTube 上传页面上完成。我在 Mozilla Firefox 中使用 Greasemonkey。

我写了这个，但我的问题是:如何将实际 HTML 页面中的 HTML 标题更改为新标题(这是一个 Javascript 变量)？

这是我的代码:

function remove_mp4()
{
   var title = document.getElementsByName("title").value;
   var new_title = title.replace(title.match(".mp4"), "");
}
function add_description()
{
   var description = document.getElementsByName("description").value;
   var new_description = "Subscribe."
}
function add_keywords()
{
   var keywords = document.getElementsByName("keywords").value;
   var new_keywords = prompt("Enter keywords.", "");
}
function change_category()
{
   var category = document.getElementsByName("category").value;
   var new_category = "<option value="27">Education</option>"
}
remove_mp4();
add_description();
add_keywords();
change_category();

注意:如果您在 JavaScript 代码中发现任何错误，请告诉我。

注意 2:如果您想知道为什么我将当前 HTML 值存储在变量中，那是因为我认为我必须使用它们来替换 HTML 值(我可能错了)。

Answer 1

已经涵盖了很多内容，但我仍然想提醒您，如果您正在寻找跨浏览器兼容性，innerHTML 是不够的，因为您可能还需要 innerText 或 textContent 来处理一些旧版本的IE甚至使用一些其他方式来修改元素的内容。

作为旁注，大多数人认为 innerHTML 已被弃用，尽管其他一些人仍在使用它。 (我不是来讨论用它好还是不好，但这只是一个小提示，供您检查)

关于备注，我建议您通过创建一些更通用的版本来进行编辑或添加，从而最大限度地减少您创建的函数数量，例如，您可以执行以下操作:

/*
*  @param $affectedElements the collection of elements to be changed      
*  @param $attribute here means the attribute to be added to each of those elements
*  @param $attributeValue the value of that attribute
*/
function add($affectedElements, $attribute, $attributeValue){
  for(int i=0; i<$affectedElements.length; i++){
    ($affectedElements[i]).setAttribute($attribute, $attributeValue);
  }
}

如果你使用全局函数为你完成工作，不仅你的代码会更容易维护，而且你将避免多次获取 DOM 中的元素，这将大大提高你的脚本运行速度.例如，在您之前的代码中，您先获取一组特定元素的 DOM，然后才能向它们添加值，换句话说，每次执行您的函数时，您都必须遍历整个 DOM 来检索您的元素，而如果您只获取元素一次，然后将其存储在 var 中，然后将它们传递给只关注添加或更改的函数，那么您显然可以避免完成一些重复性任务。

关于最后一个函数，我认为代码仍然不完整，但我建议您使用内置方法来操作 HTMLOption 内容，如果我没记错的话，使用纯 JavaScript，您会发现自己输入以下内容:

var category = document.getElem.... . options[put-index-here];
//JavaScript also lets you create <option> elements with the Option() constructor

无论如何，我的观点是你最好使用 JavaScript 的可用方法来完成工作，而不是依赖 innerHTML fpr 任何你可能需要的东西，我知道 innerHTML 是完成工作的最简单和最快的方法，但如果我可以比如说，如果您仅使用和标记构建了整个 HTML 页面，而不是使用有助于使一切更清晰的各种语义标记。

作为 future 使用的最后一点，如果您对 jQuery 感兴趣，这将为您提供一种不同的方式来通过 CSS 选择器以比普通 JavaScript 更高级的方式来操作您的 DOM。

您也可以查看此链接: replacement for innerHTML