如果 Meta 存在，获取值并将文本插入 div html?

Question

我有一个全局 header 外部应用程序包含但无法修改。

他们有权添加元标记。我想检查他们是否添加了带有标题的元标记，如果它存在，则取值并插入到空的 h2 div 中。

HTML

meta 标签如下所示：

<meta name="HeadTitle" id="HeadTitle" content="This Apps Title"/>

标记将如下所示：

 <div id="optionalTitle" class="col-md-5 col-md-offset-4 pull-right"><h2></h2></div>

JavaScript

如何检查元名称是否存在，如果存在，获取值并将其插入到 h2 元素中？

  if ($('#HeadTitle').length) {
    // append content to optionalTitle h2
  }

更新进度

我让它像这样工作

    if ($('#HeadTitle').length) {
            $('#optionalTitle > h2').append($('#HeadTitle').prop('content'));
     }

但不是这样的

     var $meta = ($('#HeadTitle'));
       if ($meta.length) {
            $('#optionalTitle > h2').append($meta.prop('content'));
        }

Answer 1

是否：

 if($('#HeadTitle').attr('content')){
     //your logic here
 }

为你工作？

Answer 2

你走在正确的轨道上。只需在适当的元素上使用 .append() 方法：

var $meta = $('#HeadTitle');
if ($meta.length) {
    $('#optionalTitle > h2').append($meta.prop('content'));
}

如果您希望替换内容而不是附加内容，.text() 会更适合您。

Answer 3

你可以使用这个： demo

$(function () {
    var $HeadTitle = $('meta[name="HeadTitle"]');

    if ($HeadTitle.length) {
        $("#optionalTitle h2").text($HeadTitle.attr("content"));
    }
});

Answer 4

只有在 JS 中你可以做：

<!-- start head -->
<meta charset="UTF-8">
<meta name="HeadTitle" id="HeadTitle" content="This Apps Title"/>
<title>Document</title>
<!-- end head -->

<!-- in body -->
<h2 class="title" id="title"></h2>
<script>
var metaTitle = document.getElementById('HeadTitle'),
    title = document.getElementById('title'),
    content = metaTitle.getAttribute('content');
    if (!!content) {
        title.innerHTML = content;
    }

</script>

我认为 getAttributes 得到了广泛的支持，如果不支持 element.attributes 自 ie6 以来您可以看到一个使用示例 here

如果 Meta 存在，获取值并将文本插入 div html?

If Meta exists get value and insert text into a div html?

javascript

jquery

meta

HTML

JavaScript

更新进度