title: Adding 'placeholder' text to an element using JS
body: <p>-</p>
  
  <p>There are a few posts on this already (<a href="https://stackoverflow.com/questions/12993130/how-to-add-a-placeholder-attribute-if-value-field-is-empty">like this one</a>) but they're not really adaptable to this situation. </p>
  
  <p>I have a shortcode that dynamically generates text content based on a custom field in my CRM, this is used to display a users serial number for their software, shown below:</p>
  
  <p><a href="https://i.stack.imgur.com/dhSXW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dhSXW.png" alt="Serial Number Field"></a></p>
  
  <p>The direct parent container for the serial number is <code>#copyTarget2</code>.</p>
  
  <p>When the container is empty it is still rendered on the page but with no content, shown here:</p>
  
  <p><a href="https://i.stack.imgur.com/XlvsF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XlvsF.png" alt="Empty Serial Number Container"></a></p>
  
  <p>I need to populate the empty container with 'placeholder' text, but not the kind that you can type over, just so that there is text visible that just reads - '<strong>No active serial number</strong>.'</p>
  
  <p>Lastly, when the field is populated, the placeholder text needs to be hidden, it doesn't really matter how it's hidden so long as it's not visible and doesn't affect the text generated by the shortcode.</p>
  
  <hr>
  
  <p>I also tried to adapt this JS Fiddle: <a href="http://jsfiddle.net/davidThomas/LAfN2/" rel="nofollow noreferrer">http://jsfiddle.net/davidThomas/LAfN2/</a></p>
  
  <p>From:</p>
  
  <pre><code>$('input:text').each(
      function(i,el) {
          if (!el.value || el.value == '') {
              el.placeholder = 'placeholdertext';
              /* or:
              el.placeholder = $('label[for=' + el.id + ']').text();
              */
          }
      });
  </code></pre>
  
  <p>To:</p>
  
  <pre><code>jQuery('#copyTarget2').each(
      function(i,el) {
          if (!el.value || el.value == '') {
              el.placeholder = 'No valid serial number.';
              /* or:
              el.placeholder = $('label[for=' + el.id + ']').text();
              */
          }
      });
  </code></pre>
  
  <p>CSS and HTML are like second languages to me but I'm new to JS so I can modify code a little but I can't write it (yet), I'm wondering what the best JS solution would be to achieve this and why?</p>